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

前端之家收集整理的这篇文章主要介绍了Angularjs中三种数据的绑定策略(“@”,“=”,“&”)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

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

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

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

二、简单的Demo实例

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

比如 str : ‘@string'

控制器中代码部分示例:

$scope.sayHello=function(name){
alert("Hello "+name);
};

}]);

myDirec.directive("drink",function(){
return{
restrict:'AE',scope:{
flavor:'@' //自动绑定,传递的是字符串
},template:"

{{flavor}}
",};
});

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

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

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

页面

执行的流程是这样的:

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

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

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

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

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

控制器部分:


'+ '

页面部分:

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

三、Expander示例

首先看控制器代码

myDirec.directive('expander',function() {
return {
restrict : 'EA',replace : true,transclude : true,scope : {
title : '=expanderTitle'
},template : '
'

  • '<div class="title" ng-click="toggle()">{{title}}
'
  • '
    '
  • '
  • ',link : function(scope,element,attrs) {
    scope.showMe = false;
    scope.toggle = function() {
    scope.showMe = !scope.showMe;
    };
    }
    };
    });

    再看页面部分:

    {{text}}

    执行的流程是这样的:

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

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

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

    {{text}}

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

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

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

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

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

    总结

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

    原文链接:https://www.f2er.com/js/43238.html
    angularjsangularjs的数据绑定绑定数据绑定策略

    猜你在找的JavaScript相关文章