文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

AngularJS中scope绑定策略的示例分析

2024-04-02 19:55

关注

这篇文章主要介绍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中scope绑定策略的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯