1

我是一个 Angular 菜鸟，试图通过我在这里和那里找到的一些例子来工作。我在这里找到了一个有趣的例子：http: //kirkbushell.me/when-to-use-directives-controllers-or-services-in-angular/我试图实际运行。在大多数情况下，它按我的预期工作。

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

这是（大部分）有效的代码：

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>

谢谢您的意见！

4

1 回答 1

1

您的点击事件是手动绑定的，并且您没有使用角度点击指令，这意味着您需要使用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>

于 2015-02-22T01:22:35.493 回答