我是一个 Angular 菜鸟，试图研究我到处找到的一些例子。我在这里发现了一个有趣的例子:http://kirkbushell.me/when-to-use-directives-controllers-or-services-in-angular/我已经尝试真正开始运行了。在大多数情况下，它的工作原理符合我的预期。
该服务肯定会按预期存储书籍并添加新书，但是 View (DOM) 中输出的书籍列表并未更新。看来双向绑定(bind)设置不正确。我可能做错了什么？
这是(大部分)有效的代码:
var module = angular.module('bookModule', []);
module.service('Book', ['$rootScope', function($rootScope) {
var service = {
books: [
{ title: 'Magician', author: 'Raymond E. Feist' },
{ title: 'The Hobbit', author: 'J.R.R Tolkien' }
],
addBook: function(book) {
service.books.push(book);
$rootScope.$broadcast('books.updated');
}
};
return service;
}]);
// Ctrl fn
var ctrl = ['$scope', 'Book', function($scope, Book) {
$scope.$on('books.updated', function(event) {
console.log(Book.books);
$scope.books = Book.books;
});
$scope.books = Book.books;
}];
// Initialize the controller
module.controller('books.list', ctrl);
// Directive to handle add book button
module.directive('addBookButton', ['Book', function(Book) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function() {
Book.addBook({title: 'Star Wars', author: 'George Lucas'});
});
}
};
}]);<!DOCTYPE html>
<html>
<head>
<title>Book example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="bookModule">
<h4>Book list</h4>
<ul ng-controller="books.list">
<li ng-repeat="book in books">
Title: {{book.title}} | Author: {{book.author}}
</li>
</ul>
<button add-book-button>Add book</button>
</body>
</html>感谢您的投入!
最佳答案
您的点击事件是手动绑定(bind)的，并且您没有使用 Angular 点击指令，这意味着您需要使用 scope.$apply() 手动运行摘要循环。
element.bind('click', function() {
Book.addBook({title: 'Star Wars', author: 'George Lucas'});
scope.$apply();
});
var module = angular.module('bookModule', []);
module.service('Book', ['$rootScope', function($rootScope) {
var service = {
books: [
{ title: 'Magician', author: 'Raymond E. Feist' },
{ title: 'The Hobbit', author: 'J.R.R Tolkien' }
],
addBook: function(book) {
service.books.push(book);
$rootScope.$broadcast('books.updated');
}
};
return service;
}]);
// Ctrl fn
var ctrl = ['$scope', 'Book', function($scope, Book) {
$scope.$on('books.updated', function(event) {
console.log(Book.books);
$scope.books = Book.books;
});
$scope.books = Book.books;
}];
// Initialize the controller
module.controller('books.list', ctrl);
// Directive to handle add book button
module.directive('addBookButton', ['Book', function(Book) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function() {
Book.addBook({title: 'Star Wars', author: 'George Lucas'});
scope.$apply();
});
}
};
}]);<!DOCTYPE html>
<html>
<head>
<title>Book example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="bookModule">
<h4>Book list</h4>
<ul ng-controller="books.list">
<li ng-repeat="book in books">
Title: {{book.title}} | Author: {{book.author}}
</li>
</ul>
<button add-book-button>Add book</button>
</body>
</html>关于javascript - Angular 图书应用程序示例的两种方式绑定(bind)问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28653391/