本文主要是介绍《AngularJS》——scope的绑定策略,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
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的绑定策略的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!