images.module.js
(function () {
'use strict';
angular
.module('imgModule.images', ['ui.router', 'ngResource', 'ngMessages', 'ui.bootstrap', 'ngAnimate', 'ngTouch']);
})();
images.router.js
(function () {
'use strict';
angular
.module('imgModule.images')
.config(config);
config.$inject = ['$stateProvider'];
function config ($stateProvider) {
$stateProvider
.state('main.imgList', {
url: '/images-list',
views: {
'content@': {
templateUrl: 'app/components/images/images-list.html',
controller: 'imagesListController',
controllerAs: 'ilc',
resolve: {
images: getImages
}
}
}
})
.state('main.imgAdd', {
url: '/images-list/add',
views: {
'content@': {
templateUrl: 'app/components/images/images-add.html',
controller: 'imagesController',
controllerAs: 'ic',
resolve: {
images: getAllImages,
title: editTitle,
newImg: saveImages
}
}
}
})
.state('main.imgEdit', {
url: '/images/:id',
views: {
'content@': {
templateUrl: 'app/components/images/images-edit.html',
controller: 'imagesController',
controllerAs: 'ic',
resolve: {
images: getImages,
title: editTitle,
newImg1
}
}
}
});
getImages.$inject = ['Albums'];
function getImages(Albums) {
return Albums.get({pageSize:5}).$promise;
}
newImages.$inject = ['Albums'];
function newImages(Albums) {
return new Albums();
}
saveImages.$inject = ['Albums'];
function saveImages(Albums) {
return Albums.save().$promise;
}
getAllImages.$inject = ['Albums'];
function getAllImages(Albums) {
return Albums.get().$promise;
}
retrieveImages.$inject =['$stateParams', 'Albums'];
function retrieveImages($stateParams, Albums) {
return Albums.get({id: $stateParams.id}).$promise;
}
editTitle.$inject = ['$stateParams'];
function editTitle($stateParams) {
return $stateParams.description;
}
newImg1.$inject = ['$stateParams'];
function newImg1 ($stateParams){
return { description : $stateParams.id};
}
}
})();
图像-list.service.js
(function() {
"use strict";
angular
.module('imgModule.images')
.factory('Albums', Albums);
Albums.$inject = ['$resource'];
function Albums($resource) {
var collectionName = "images";
return $resource("http://localhost:3000/api/:collectionName/:id",
{ id: "@id", collectionName: collectionName},
{ update: { method: 'PUT' } });
}
})();
图像-add.service.js
(function() {
"use strict";
angular
.module('imgModule.images')
.factory('addImgs', addImgs);
addImgs.$inject = ['$http'];
function addImgs($http) {
var collectionName = "images";
var service = {
add: add
}
return service;
function add(newImg) {
return $http
.post('http://localhost:3000/api/' + collectionName, {
id: "ic.newImg.id",
title: "ic.newImg.title",
album: "ic.newImg.album",
description: "ic.newImg.description",
path_hires: "ic.newImg.path_hires",
path_lores: "ic.newImg.path_lores"
}).success(function(data, status, headers, config){
console.log(data)});
}
}
})();
图像-add.controller.js
(function () {
'use strict';
angular
.module('imgModule.images')
.controller('imagesController', imagesController);
imagesController.$inject = ['$location', 'newImg', 'images','addImgs'];
function imagesController ($location, newImg, images, addImgs) {
var ic = this;
ic.images = images.results;
ic.newImg = newImg;
ic.save = function(newImg) {
addImgs.add(newImg);
};
function success() {
$location.path('/images');
}
}
})();
图像-add.html
<div class="container">
<hr>
<div>
<form role="form" class="form-horizontal" name="ic.form" novalidate ng-submit="ic.save(ic.newImg)">
<div class="form-group">
<label class="control-label col-sm-2" for="id">Id</label>
<div class="col-sm-6 col-md-4">
<input type="hidden" name="id" ng-value="ic.newImg.id" />
</div>
<div ng-messages="ic.form.id.$error" ng-show="ic.form.id.$touched">
<p ng-message="required">This field is required.</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="title">Title</label>
<div class="col-sm-6 col-md-4">
<input type="text" ng-model="ic.newImg.title" class="form-control">
</div>
<div ng-messages="ic.form.title.$error" ng-show="ic.form.title.$touched">
<p ng-message="required">This field is required.</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="album">Year</label>
<div class="col-sm-6 col-md-4">
<select ng-model="ic.newImg.album" id="album" class="form-control">
<option value="">---</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
</div>
<div ng-messages="ic.form.album.$error" ng-show="pc.form.album.$touched">
<p ng-message="required">This field is required.</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="description">Description</label>
<div class="col-sm-6 col-md-4">
<input type="text" ng-model="ic.newImg.description" class="form-control">
</div>
<div ng-messages="ic.form.description.$error" ng-show="ic.form.description.$touched">
<p ng-message="required">This field is required.</p>
<p ng-message="minlength">This field needs to contain min 4 digits.</p>
<p ng-message="maxlength">This field needs to contain max 30 digits.</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="path_hires">Wallpaper</label>
<div class="col-sm-6 col-md-4">
<input type="text" ng-model="ic.newImg.path_hires" class="form-control">
</div>
<div ng-messages="ic.form.path_hires.$error" ng-show="ic.form.path_hires.$touched">
<p ng-message="required">This field is required.</p>
<p ng-message="minlength">This field needs to contain min 4 digits.</p>
<p ng-message="maxlength">This field needs to contain max 30 digits.</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="path_lores">Thumbnail</label>
<div class="col-sm-6 col-md-4">
<input type="text" ng-model="ic.newImg.path_lores" class="form-control">
</div>
<div ng-messages="ic.form.path_lores.$error" ng-show="ic.form.path_lores.$touched">
<p ng-message="required">This field is required.</p>
<p ng-message="minlength">This field needs to contain min 4 digits.</p>
<p ng-message="maxlength">This field needs to contain max 30 digits.</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="good">Agree terms?</label>
<div class="col-sm-6 col-md-4">
<input ng-model="data.check" type="checkbox" class="form-control" ng-change="data.text = !data.check ? '' : data.text">
</div>
</div>
<button type="subbmit" class="btn btn-primary" ng-disabled="!data.check">Confirm add</button>
<a class="btn btn-default" href="#/images"><i class="fa fa-chevron-left"></i>Back</a>
</form>
</div>
</div>
这是我的测试应用程序的一部分,我得到了一些我无法解决的错误。 当我切换到images-add.html时,它会在我的json文件中创建一个新对象,它是最后一项,它的格式是{&#34; _id&#34;:null}。所有其他人都有&#34; id&#34; (不是&#34; _id&#34;)。
[{"id":"i1","title":"Gorillaz","album":"2014","description":"Gorillaz band wallpaper","path_hires":"slike/gallery/1.jpg","path_lores":"slike/thumbs/1.jpg"}, ... ,{"id":"i16","title":"Eau rouge","album":"2014","description":"Ayrton Senna comming to Eau rouge","path_hires":"slike/gallery/16.jpg","path_lores":"slike/thumbs/16.jpg"},{"_id":null}]
它不应该向json写任何东西,直到表单提交,并在提交后写入另一个_id:null。所以我试图解决它转发newImg对象以在add.service中添加函数,但我得到的只是在json末尾带有null id的字符串列表。
任何帮助将不胜感激。提前谢谢。