伏龙阁资源网

AngularJS中scope的绑定策略实例分析
站长资源 2024/11/25 佚名
2 0

本文实例讲述了AngularJS中scope的绑定策略。分享给大家供大家参考，具体如下：

当scope选项写为scope:{ }这种形式的时候，就已经为指令生成了隔离作用域，指令的模板就无法访问外部作用域了：

具有隔离作用域的指令最主要的使用场景是创建可复用的组件，组件可以在未知上下文中使用，并且可以避免污染所处的外部作用域或不经意地污染内部作用域。

现在，我们来看看绑定策略的三种形式： @、= 、&。

1. @

本地作用域属性：使用@符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域的变量：

@ (or @attr)

把当前的属性作为字符串传递。你还可以绑定来自外层的scope的值，在属性值中插入{{ }}即可。什么意思呢？说的简单一点就是假设你在模板中有个双花括号表达式，然后我们把表达式里的内容和html中指令里特定名字的属性绑定起来：

<div ng-controller="nameController">
  <direct for-name="{{ Name }}"></direct>
<div>


directive("direct",function(){
    return{
      restrict: 'A',
      template: '<div>指令中：{{ name }}</div>',
      scope:{
       name:'@forName'
      }
     }
 })
.controller("nameController",function($scope){
   $scope.Name="张三";
});

2. =

与父scope中的属性进行双向绑定

@是针对字符串（准确来说是表达式expression）而用，但=是针对某个对象的引用；

<div ng-controller="nameController">
  <direct case="data[0]"></direct>
  <direct case="data[1]"></direct>
<div>


directive("direct",function(){
    return{
      restrict: 'ECMA',
      template: '<div>指令中：{{ case.name }}</div>',
      scope:{
       case:'='
      }
     }
 })
.controller("nameController",function($scope){
   $scope.data=[{name:"张三"},{name:"李四"}];
});

data是一个对象数组，里面包含了两个对象，所以，我们分别把两个对象传递给了case这个属性，case属性就把这个对象的引用传递给了模板中我们写的{{ case.name }}中的case;而如果你在=后边加上了自己定义的名字，那只要把html里case属性换成那个名字就可以了。

3. &

传递来自父scope中的函数、稍后调用

它的含义是：对父级作用域进行绑定，并将其中的属性包装成一个函数，注意任何类型的属性都会被包装成一个函数，比如一个单纯的字符串，或是一个对象数组，或是一个函数方法。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接