《AngularJS》——scope的绑定策略

来源：互联网发布：知乎可以匿名发文章吗编辑：程序博客网时间：2024/05/17 07:57

scope这个对象在Angular中非常重要，可以说要想学好AngularJS，熟练使用Scope时基本功，下面介绍一下Scope的几种绑定策略。

1、@：把当前的属性作为字符串传递。你还可以绑定来自外层的scope的值，在属性值中插入{{}}即可。下面是代码。

<!DOCTYPE html><html  ng-app="MyModule"><head>    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" href="bootstrap-3.0.0/css/bootstrap.css"></head><body>       <div ng-controller="myCtrl">           <drink zk="{{ctrlFlavor}}"></drink>       </div></body><script src="angular-1.3.0.14/angular.js"></script><script src="scope.js"></script></html>

Controller代码

var myModule=angular.module("MyModule",[]);myModule.controller('myCtrl',['$scope',function($scope){    $scope.ctrlFlavor="88888";}])myModule.directive("drink",function(){   return{        restrict:'AE',        scope:{           zk:'@'        },        template:"<div>{{zk}}</div>"   }})

指令drink中有一个zk属性，其上一层的div中的scope有一个ctrlFlavor属性，上面的例子就是讲上层div中scope的值绑定在下层指令drink的zk属性上。

2、“ = ” ：与父scope中的属性进行双向绑定

HTML中的代码，我就简写了啊，与上面的差不多

<div ng-controller="myCtrl">           Ctrl:           <br>           <input type="text" ng-model="ctrlFlavor">           <br>           Directive:           <br>           <drink zk="ctrlFlavor"></drink>       </div>

Controller中的代码

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

在HTML中，有一个文本框，在drink指令的模板中，也有一个文本框，这两个文本框的内容是双向绑定的。也就是说，当上面文本框中的内容改变时，下面的文框中的内容也跟着改变。

3、“ & ”：传递来自父scope中的函数、稍后调用

<span style="font-family:SimSun;font-size:18px;">  <div ng-controller="MyCtrl">       <greeting greet="sayHello(name)"></greeting>   </div></span>

Controller代码

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/>'    }});

这个例子的意思是，在div中绑定一个Controller，这个Controller中定义了一个sayHello的方法，在div中又定义了一个名为greeting的指令，这个指令的greet方法与父层scope的sayHello相互关联，然后我们在Controller中让greeting指令中的scope定义好greet，这样，父scope中的函数就传递到了子scope中。

上面就是scope的绑定策略中的简单实例，学习AngularJS，要从基础抓起。

1 0