Javascript 由于ng控制器而丢失angularjs引导
我对angular是新手,对javascript和jade不太熟悉,所以我的问题听起来可能很愚蠢。我的webapp基于以下网站:。它使用数据库构建待办事项列表。我有三个不同的文件:服务、控制器和索引 服务Javascript 由于ng控制器而丢失angularjs引导,javascript,angularjs,pug,Javascript,Angularjs,Pug,我对angular是新手,对javascript和jade不太熟悉,所以我的问题听起来可能很愚蠢。我的webapp基于以下网站:。它使用数据库构建待办事项列表。我有三个不同的文件:服务、控制器和索引 服务 var app = angular.module('myApp', []); app.value('version', '0.1'); app.factory('myPouch', [function() { var mydb = new PouchDB('ng-pouch');
var app = angular.module('myApp', []);
app.value('version', '0.1');
app.factory('myPouch', [function() {
var mydb = new PouchDB('ng-pouch');
PouchDB.replicate('ng-pouch', 'http://127.0.0.1:5984/clients', {continuous: true});
PouchDB.replicate('http://127.0.0.1:5984/clients', 'ng-pouch', {continuous: true});
return mydb;
}]);
app.factory('pouchWrapper', ['$q', '$rootScope', 'myPouch', function($q, $rootScope, myPouch) {
return {
add: function(text) {
var deferred = $q.defer();
var doc = {
type: 'todo',
text: text
};
myPouch.post(doc, function(err, res) {
$rootScope.$apply(function() {
if (err) {
deferred.reject(err);
} else {
deferred.resolve(res);
}
});
});
return deferred.promise;
},
remove: function(id) {
var deferred = $q.defer();
myPouch.get(id, function(err, doc) {
$rootScope.$apply(function() {
if (err) {
deferred.reject(err);
} else {
myPouch.remove(doc, function(err, res) {
$rootScope.$apply(function() {
if (err) {
deferred.reject(err);
} else {
deferred.resolve(res);
}
});
});
}
});
});
return deferred.promise;
}
};
}]);
app.factory('listener', ['$rootScope', 'myPouch', function($rootScope, myPouch) {
myPouch.changes({
continuous: true,
onChange: function(change) {
if (!change.deleted) {
$rootScope.$apply(function() {
myPouch.get(change.id, function(err, doc) {
$rootScope.$apply(function() {
if (err) console.log(err);
$rootScope.$broadcast('newTodo', doc);
});
});
});
} else {
$rootScope.$apply(function() {
$rootScope.$broadcast('delTodo', change.id);
});
}
}
});
}]);
控制器
var app = angular.module('myApp', []);
app.controller('TodoCtrl', ['$scope', 'listener', 'pouchWrapper', function($scope, listener, pouchWrapper) {
$scope.submit = function() {
console.log('submit');
pouchWrapper.add($scope.text).then(function(res) {
console.log('test');
$scope.text = '';
}, function(reason) {
console.log(reason);
});
};
$scope.remove = function(id) {
pouchWrapper.remove(id).then(function(res) {
// console.log(res);
}, function(reason) {
console.log(reason);
});
};
$scope.todos = [];
$scope.$on('newTodo', function(event, todo) {
$scope.todos.push(todo);
});
$scope.$on('delTodo', function(event, id) {
for (var i = 0; i<$scope.todos.length; i++) {
if ($scope.todos[i]._id === id) {
$scope.todos.splice(i,1);
}
}
});
}]);
在本例中,我的控制器“TodoCtrl”执行angularjs的引导(我没有得到结果3)。如果我移除容器(与控制器一起),我会得到预期的结果,但是我不能使用我的控制器。无论如何,对于容器,提交操作似乎也不起作用
有什么想法吗?我真的想知道我做错了什么
谢谢 您正在创建模块两次(var-app=angular.module('myApp',[]);)。你应该删除其中一个。好吧,你是对的,但我遗漏了一些东西……在angular的phonecat示例中,它们对每个文件使用不同的模块名称(services.js controllers.js等)。然后在app.js中创建另一个模块,如表中列出的其他文件中的其他模块:var app=angular.module('MyApp',['service.module','controller.module'])。我尝试过这样做(将我的服务模块更改为var appSrv=angular.module('service.module',[])和appSrv.factory…),但在我的应用程序中它不起作用。仅供参考,我在索引中添加了app.js。我遗漏了什么吗?我问了另一个关于子模块的问题…请回答我的问题(与您的评论相同),以便我可以验证它!再次感谢有人回答:)
doctype html
html(ng-app='myApp')
head
title=title
link(rel='stylesheet' href='stylesheets/style.css')
link(rel='stylesheet' href='bower_components/bootstrap/dist/css/bootstrap.css')
script(type='text/javascript' src='javascripts/angular-1.2.16.min.js')
script(type='text/javascript' src='javascripts/pouchdb-2.1.0.min.js')
script(type="application/javascript" src="app/controllers.js")
script(type="application/javascript" src="app/services.js")
body
.container(ng-controller='TodoCtrl')
h1 TODO application
p 1 + 2 = {{ 1 + 2 }}
p
form.form-inline(ng-submit='submit()')
input(placeholder='New task', type='text', ng-model='text')
input.btn.btn-primary(type='submit', value='Add')
p
table.table.table-hover.span3
thead
tr
th Task
th
tbody
tr(ng-repeat='todo in todos')
td {{todo.text}}
td
a.btn.btn-mini.btn-danger(ng-click='remove(todo._id)', href='#') remove