码迷,mamicode.com
首页 > Web开发 > 详细

《AngularJS》——scope的绑定策略

时间:2016-05-13 00:19:10      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:

  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,要从基础抓起。  

《AngularJS》——scope的绑定策略

标签:

原文地址:http://blog.csdn.net/zhoukun1008/article/details/51296794

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!