您的位置：首页 > Web前端 > AngularJS

angularjs controller, service, directive 的demo

2015-12-29 10:56 483 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航