angularjs controller, service, directive 的demo

最新推荐文章于 2020-07-19 16:49:41 发布

timelessmemoryli

最新推荐文章于 2020-07-19 16:49:41 发布

阅读量664

点赞数

分类专栏： Angularjs 文章标签： angularjs directive service controller

本文链接：https://blog.csdn.net/u014788227/article/details/50424701

版权

Angularjs 专栏收录该内容

55 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="bootstrap.min.css">
        <script src="jquery.min.js"></script>
        <script src="angular.min.js"></script>
        <script src="bootstrap.min.js"></script>
        <script type="text/javascript">
            angular.module('myapp', [])
            .controller('BookController', ['$scope', 'AddBookService', function($scope, AddBookService) {
                $scope.books = AddBookService.books;
                $scope.$on('update-books', function(event) {
                    $scope.books = AddBookService.books;

                    //在AngularJS上下文之外的任何地方修改了model，那么你就需要通过手动调用$apply()来通知AngularJS
                    $scope.$apply();
                });
            }])
            .factory('AddBookService', ['$rootScope', function($rootScope) {
                tmp = {
                    books : [
                        {'name' : 'The Adventures of Tom Sawyer', 'author': 'Mark Twain'},
                        {'name' : 'Robinson Crusoe', 'author': 'Daniel Defoe'},
                        {'name' : 'A Ghost Story', 'author': 'Mark Twain'}
                    ],
                    addBook : function(book) {
                        tmp.books.push(book);
                        $rootScope.$broadcast('update-books');
                    }
                };
                return tmp;
            }])
            .directive('addBookBtn', ['AddBookService', function(AddBookService) {
                return {
                    restrict: 'E',
                    replace: false,
                    template: '<input type="text" class="input-small" ng-model="bookName" ' +
                              'placeholder="BookName"><br/><br/>' +
                              '<input type="text" class="input-small" ng-model="bookAuthor" ' +
                              'placeholder="BookAuthor"><br/><br/>' +
                              '<button class="btn btn-mini btn-primary">Add Book</button>',
                    link: function(scope, elem,attrs) {
                        scope.bookName = '';
                        scope.bookAuthor = '';
                        //elem = add-book-btn
                        elem.children('button').bind('click', function() {
                            if (scope.bookName != '' && scope.bookAuthor != '') {
                                AddBookService.addBook({'name': scope.bookName, 'author':scope.bookAuthor});
                                scope.bookName = '';
                                scope.bookAuthor = '';
                                scope.$apply();
                            }
                        });
                    }
                };
            }]);
        </script>
        <style type="text/css">
        </style>
    </head>
    <body ng-app="myapp">
       <div ng-controller="BookController">
            <table class="table table-bordered table-hover table-condensed">
                <caption>Book</caption>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Author</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="book in books">
                        <td>{{book.name}}</td>
                        <td>{{book.author}}</td>
                    </tr>
                </tbody>
            </table>
       </div>
       <add-book-btn></add-book-btn>
    </body>
</html>

timelessmemoryli

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs controller, service, directive 的demo

angular.module('myapp', []) .controller('BookController', ['$scope', 'AddBookService', function($scope, AddBookService) { $scope.books = AddBookService.books;
复制链接

扫一扫