随笔- 1793 文章- 1 评论- 61 阅读- 298万

我也谈 AngularJS 怎么使用Directive, Service, Controller

原文地址：http://sunqianxiang.github.io/angularjs-zen-yao-shi-yong-directiveservicecontroller.html

其转自大漠穷秋，这是对于初学者来说讲的非常好的入门文

在有关于 Directive,Service,Controller 时候先看一下图

这是我画出来帮助理解的，并不代表angularjs走这种逻辑。不过在本例的确是这样的。 ========= 首先你需要先去定义你的module.

var Mymodule = angular.module('My.Alex.module', []);
html标记也记得修改哦
<html ng-app="My.Alex.module">

在这里我们先定义Service服务，本例是一个简单的图片添加的模式，数据跟add方法都在Service。这样有助于解耦。

Mymodule.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.update');
        }
    }
    return service;
}]);

在这里可以看出我定义了一个Book服务，然后我现在要在controller添加他，来使用Book里面的数据。

Mymodule.controller("books.list",['$scope','Book',function(scope,Book){
            scope.$on('books.update',function(event){
                scope.books = Book.books;
                scope.$apply(); #必须加，不然数据不更新
            });
            scope.books = Book.books;
        }]);

这里在controller里面定义服务更新的方法，其主要是更新scope. $broadcast 跟$on 对应使用

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

然后我添加一个directive来让button可以添加书本。这是一个bind的过程，剩下只要添加到body里面就完成了

<body ng-controller="books.list">
    <li ng-repeat="book in books">
        <ul>{{book.title}}, {{book.author}}</ul>
    </li>
    <button add-book-button>Add book</button>
</body>