Question

我是一名Angular noob，试图通过我在这里和那里找到的一些例子。我在这里找到了一个有趣的例子：http://kirkbushell.me/when-to-use-directives-controllers-or-services-in-angular/我试图让它真正运行。在大多数情况下，它的工作正如我所料。

该服务肯定会存储书籍并按预期添加新书，但视图（DOM）中输出的书籍列表不会更新。看起来双向绑定没有正确设置。我可能做错了什么？

以下是（大部分）工作的代码：

＆＃13;

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'});
      });
    }
  };
}]);

＆＃13;

<!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>

＆＃13;

感谢您的投入！

Answer 1

您的点击事件是手动绑定的，并且您没有使用角点击指令，这意味着您需要使用scope.$apply()手动运行摘要周期。

 element.bind('click', function() {
    Book.addBook({title: 'Star Wars', author: 'George Lucas'});
    scope.$apply();
  });

＆＃13;

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();
      });
    }
  };
}]);

＆＃13;

<!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>

＆＃13;

Angular书籍应用程序示例的双向绑定问题

1 个答案: