angularJS1笔记-(14)-自定义指令(scope)
index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div ng-app="myApp"> <div ng-controller="firstController"> <div book-list books="books" parent-books="books" scope-title="{{title}}"></div> </div> </div> <script type="text/javascript" src="../../vendor/angular/angularJs.js"></script> <script type="text/javascript" src="app/index.js"></script> <script> </script> </body> </html>
index.js:
var myApp = angular.module('myApp', []) .directive('bookList', function () { return { restrict: 'ECAM', controller: function ($scope) { // console.log($scope); //方式1:&books // $scope.books = $scope.a(); //可以重新赋值 //方式2:双向绑定 在控制器里改也会改变view的值 // $scope.books = $scope.b; // $scope.b.push({ // name:"nodejs" // }) //方式3: console.log($scope.c) }, // scope:false,//如果scope此时为真就会和下面的scope是同一个作用域 如果为假的时候就会创建一个继承了父scope的新的作用域 scope: { //方式1: //当scope为对象的时候 也会创建一个继承了父scope的新的scope 但是却无法继承父类的数据源 //将父元素books封装成一个a函数 // a: '&books' //a就是可以访问到页面中的一个属性books 从而访问到值 而a会生成一个函数 //方式2:双向绑定 // b:'=parentBooks' //方式3:单向绑定 只能绑定简单类型 不能绑定对象类型 c:"@scopeTitle" }, controllerAs: 'bookListController', //起一个别名 template: '<div><ul><li ng-repeat="book in books">{{book.name}}</li></ul></div>', replace: true } }) .controller('firstController', ['$scope', function ($scope) { console.log($scope); $scope.books = [ { name: 'php' }, { name: 'js' }, { name: 'java' } ]; $scope.title = "我是title" }]);
运行结果: