欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angularjs中三种数据的绑定策略(“@”,“=”,“&”)

程序员文章站 2022-09-09 09:26:27
前言 我们想要实现这样的效果:当我们点击标题的时候展示下面的内容,再点击则收回去。 一、首先回顾一下有哪些绑定策略? 看这个实在是有点抽象了,我们来看具体的实...

前言

我们想要实现这样的效果:当我们点击标题的时候展示下面的内容,再点击则收回去。

Angularjs中三种数据的绑定策略(“@”,“=”,“&”)

一、首先回顾一下有哪些绑定策略?

Angularjs中三种数据的绑定策略(“@”,“=”,“&”)

看这个实在是有点抽象了,我们来看具体的实例分析吧!

二、简单的demo实例

@绑定:传递一个字符串作为属性的值。

比如 str : ‘@string'

控制器中代码部分示例:

mydirec.controller('myctrl3',['$scope',function($scope){
 $scope.ctrlflavor="鸡尾酒";
 
 $scope.sayhello=function(name){
 alert("hello "+name);
 };
 
}]);

mydirec.directive("drink",function(){
 return{
  restrict:'ae',
  scope:{
  flavor:'@' //自动绑定,传递的是字符串
  },
  template:"<div>{{flavor}}</div>",
 };
});

页面中使用标签部分示例:

<div ng-controller="myctrl3">
 <drink flavor="{{ctrlflavor}}"></drink>
 </div>

分析我们在drink指令中为什么能取得在父作用域中的值呢?原因就在于我们使用了@绑定策略,可以将ctrlflavor赋值给flavor,这样在模板中就能取到该值了。

=绑定:指定获取属性的类型为父作用域的属性

mydirec.directive("drink2",function(){
 return{
 restrict:'ae',
 scope:{
  flavor:'=' //自动绑定
 },
 template:'<input type="text" ng-model="flavor"/>'
 };
});

页面:

<div ng-controller="myctrl3">
 <drink2 flavor="ctrlflavor"></drink2>
 </div>

执行的流程是这样的:

  ① 指令被编译的时候会扫描到template中的模型发现有一个flavor,

  ② 查找scope中是否定义:通过=与父作用域绑定,方式是传递父作用域中的属性ctrlflavor;

  ③ flavor与父作用域中的ctrlflavor属性绑定,找到它的值“鸡尾酒”;

  ④ 将model的值显示在模板中。

&绑定:传递的是父作用域中的函数

控制器部分:

mydirec.directive("greeting", function() {
 return {
 restrict:'ae',
 scope:{
  greet:'&'
 },
 template:'<input type="text" ng-model="username" /><br/>'+
   '<button ng-click="greet({name:username})">问候一下</button><br/>'
 };
});

页面部分:

<div ng-controller="myctrl3">
  <greeting greet="sayhello(name)"></greeting>
  <greeting greet="sayhello(name)"></greeting>
  <greeting greet="sayhello(name)"></greeting>
</div>

从结果上看,三个输入框中的内容互不影响,因为都是新的独立作用域,能够完成从视图到模型的绑定。

三、expander示例

首先看控制器代码:

/*expander示例*/
mydirec.controller('somecontroller',function($scope) {
 $scope.title = '点击展开';
 $scope.text = '这里是内部的显示的内容';
});

mydirec.directive('expander', function() {
 return {
 restrict : 'ea',
 replace : true,
 transclude : true,
 scope : {
  title : '=expandertitle'
 },
 template : '<div>'
   + '<div class="title" ng-click="toggle()">{{title}}</div>'
   + '<div class="body" ng-show="showme" ng-transclude></div>'
   + '</div>',
 link : function(scope, element, attrs) {
  scope.showme = false;
  scope.toggle = function() {
  scope.showme = !scope.showme;
  };
 }
 };
});

再看页面部分:

<div ng-controller='somecontroller'>
 <expander class='expander' expander-title='title'> {{text}} </expander>
 </div>

执行的流程是这样的:

  ① 指令被编译的时候会扫描到template中的模型发现有一个{{title}},

  ② 查找scope中是否定义:通过=与父作用域绑定,方式是传递父作用域中的属性;

我总是在这里犯糊涂,解释下这个“方式是传递父作用域中的属性”,这个在哪里用的呢?

<div ng-controller='somecontroller'>
 <expander class='expander' expander-title='title'> {{text}} </expander>
 </div>

看到没,指令中的属性expander-title='title',这不就是传递父作用域中的属性吗?

  ③ expander-title与父作用域中的title属性绑定,找到它的值“点击展开”;

  ④ 将title的值显示在模板中。

注意:指令中的独立作用域中的属性title是为了给下面的模板使用 的,而title所对应的值,要依据页面中指令的使用传人具体的父作用域中的属性,完成属性的绑定操作。

总之、我们可以利用angularjs为我们提供的数据绑定策略来实现从父作用域向指令中传值,这个很有用哦!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。