首页 > 代码库 > angularjs学习笔记3-directive中scope的绑定修饰符

angularjs学习笔记3-directive中scope的绑定修饰符

在angularjs中,一个directive返回一个对象,对象存在很多属性,并且可以在directive中自定义自己的scope,而使用自己的scope是为了防止一个directive被使用在多个地方之间发生相互影响,通常这个scope可以被定义为true或者对象,当这个scope被定义为true时,代表这个指令拥有独立的scope,它被多次使用在多个地方之间不会相互影响,例如:

HTML代码

<!doctype html><html ng-app="MyModule">    <head>        <meta charset="utf-8">        <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">    </head>    <body>        <hello></hello>        <hello></hello>            </body>    <script src="framework/angular-1.3.0.14/angular.js"></script>    <script src="IsolateScope.js"></script></html>

js代码

var myModule = angular.module("MyModule", []);myModule.directive("hello", function() {    return {        restrict: ‘AE‘,        //这里是创建了一个独立的scope,以防止各个指令之间相互影响        scope:true,        template: ‘<div><input type="text" ng-model="userName"/>{{userName}}</div>‘,        replace: true    }});

 演示效果:

你会发现这两个指令之间输入没有互相影响。当你不指定这个directive中的scope属性的时候,例如这样

var myModule = angular.module("MyModule", []);myModule.directive("hello", function() {    return {        restrict: ‘AE‘,        //这里是创建了一个独立的scope,以防止各个指令之间相互影响       // scope:true,        template: ‘<div><input type="text" ng-model="userName"/>{{userName}}</div>‘,        replace: true    }});

那么显示效果如下:

操作其中一个input,那么任何使用这个指令的地方都会被修改。即这个指令的多个实例之间是共享一个 scope的

scope也可以被设定为一个对象,即{},当设定为空对象{}的时候,效果和设置为true一样,这里可以通过将其设定为不为空的对象以达到复用其对应controller中的属性及方法。

要复用其对应controller(即其父scope)中的方法和对象,angular提供了三种修饰符:

第一种为:@,这表示绑定的是一个字符串,而且是单向绑定

<!doctype html><html ng-app="MyModule">    <head>        <meta charset="utf-8">        <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">    </head>    <body>        <div ng-controller="MyCtrl">            <drink flavor="{{ctrlFlavor}}"></drink>        </div>    </body>    <script src="framework/angular-1.3.0.14/angular.js"></script>    <script src="ScopeAt.js"></script></html>

js 代码

var myModule = angular.module("MyModule", []);myModule.controller(‘MyCtrl‘, [‘$scope‘, function($scope){	$scope.ctrlFlavor="111";}])myModule.directive("drink", function() {    return {        restrict:‘AE‘,        //这里的        scope:{            //@表示把当前属性作为字符串进行绑定            flavor:‘@‘        },        template:"<div>{{flavor}}</div>"            }});

 首先这个指令会将HTML中的drink标签替换为"<div>{{flavor}}</div>",而原HTML的<drink flavor="{{ctrlFlavor}}"></drink>存在一个flavor的属性,指定其绑定了一个表达式,而directive中又指定了这个表达式是个字符串 scope:{flavor:‘@‘},这就将drink标签的flavor属性指向了其对应的controller即MyCtrl中的scope中的ctrlFlavor上,这样directive就复用了其controller中的一个属性,但是这种复用或者叫绑定是单向的,只有controller发生改变directive内容才会改变,显示效果如下:

这是第一种修饰符@的作用,简单来就是让directive可以单向绑定其父scope中的属性;

第二种修饰符是=,表示绑定的是其父scope中的属性,但是是双向绑定,代码如下:

<!doctype html><html ng-app="MyModule">    <head>        <meta charset="utf-8">        <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">    </head>    <body>        <div ng-controller="MyCtrl">            Ctrl:            <br>            <input type="text" ng-model="ctrlFlavor">            <br>            Directive:            <br>            <drink flavor="ctrlFlavor"></drink>        </div>    </body>    <script src="framework/angular-1.3.0.14/angular.js"></script>    <script src="ScopeEqual.js"></script></html>

js代码:

var myModule = angular.module("MyModule", []);myModule.controller(‘MyCtrl‘, [‘$scope‘, function($scope){ $scope.ctrlFlavor="111";}])myModule.directive("drink", function() {    return {     restrict:‘AE‘,        scope:{         flavor:‘=‘        },        template:‘<input type="text" ng-model="flavor"/>‘    }});

这里将flavor依然指向的是其controller的scope中的ctrFlavor属性,但是进行模板替换的时候使用的是ng-model 用来进行双向数据操作,注意到 scope:{flavor:‘=‘},这说明这个directive的flavor属性进行了一个双向绑定,而对应的html中不再是使用{{}}这种单向绑定了,而是直接将这个<drink flavor="ctrlFlavor"></drink>属性指向了controller中的scope中的ctrlFlavor属性,简单来讲,就是利用=修饰符,你可以让你的directive与其父作用域中的某个属性进行双向绑定;

第三种修饰符是&,它的含义是用来绑定directive父作用域中的某个函数,代码如下:

<!doctype html><html ng-app="MyModule"> <head>  <meta charset="utf-8">  <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css"> </head> <body>  <div ng-controller="MyCtrl">   <greeting greet="sayHello(name)"></greeting>   <greeting greet="sayHello(name)"></greeting>   <greeting greet="sayHello(name)"></greeting>  </div> </body> <script src="framework/angular-1.3.0.14/angular.js"></script> <script src="ScopeAnd.js"></script></html>

js代码

var myModule = angular.module("MyModule", []);myModule.controller(‘MyCtrl‘, [‘$scope‘, function($scope){ $scope.sayHello=function(name){  alert("Hello "+name); }}])myModule.directive("greeting", function() {    return {     restrict:‘AE‘,        scope:{         greet:‘&‘        },        template:‘<input type="text" ng-model="userName" /><br/>‘+           ‘<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>‘    }});

在这里,directive中的scope中设定一个属性为 scope:{ greet:‘&‘},&代表这个指令的greet属性绑定了其父scope中的一个函数,而在HTML中<greeting greet="sayHello(name)"></greeting>greet指向的是其父scope(即controller)的sayHello方法,并传递一个参数name,同时在模板替换中,将ng-click设定为greet属性对应的值,这里传递的参数是一个对象ng-click="greet({name:userName})",这种写法是用来收集input中输入的值。

 

 

 

 

 

 


 

 

angularjs学习笔记3-directive中scope的绑定修饰符