华山资源网

浅谈AngularJs指令之scope属性详解
网络编程 2024/11/18 佚名
3 1

AngularJS使用directive()方法类定义一个指令：

.directive("name",function(){
  return{
    
  };
})

上面是定义一个指令的主体框架，该方法接受两个参数：

1、第一个参数：name表示定义的指令的名称（angularjs会用这个name注册这个指令）

2、第二个参数：函数，该番薯必须返回一个对象或者一个函数，但通常我们会返回一个对象。return后接的就是返回的对象。

在返回的对象中有一个scope属性，这个属性用来修饰指令的作用域。

每次在注册一个指令的时候，这个指令都会考虑一个问题，我们用我自己所在作用域呢，还是创建一个从父作用域继承的子作用域呢，

还是创建一个隔离的作用域呢（不依赖外部的作用域）；

scope属性的值为false，true，{ } 分别对应着上面的所在作用域，子作用域，隔离作用域。

我们举三个例子让我们彻底明白这几个属性的用法。

1、scope：false

html代码：

<div ng-controller="myController">
  <div>
    <span>我的名字是</span><span ng-bind="name"></span><br/>
    <span>我的年龄是</span><span ng-bind="age"></span>
    <div my-directive></div>
  </div>
</div>
<script>
  angular.module("app",[])
    .controller("myController",function($scope){
      $scope.name = "kobe";
      $scope.age = 39;
    })
    .directive("myDirective",function(){
      return{
        scope:false,
        restrict:"A",
        template:"<div><h1>下面的部分是我们创建指令时生成的</h1>"+
            "我的名字是:<span ng-bind='name'></span><br/>"+
            "我的年龄是:<span ng-bind='age'></span><br/>"+
            "输入你的新名字:<input type='text' ng-model='name'>"+
            "</div>"
      };
    })
</script>

效果：

这时，指令的作用域是和myController的作用域是相同的，因此当我们在输入框中输入新的名字时，上下两处的名字都会跟着变动，如下图所示：

2、scope：true

这时刚进入页面的效果，当我们在输入框输入新的名字时，就会发生和第一个实验不一样的效果，如图所示：

这里，上部分的名字没有发生改变，而下面的名字发生了改变。

这个实验中，有两点需要我们注意下：

1、刚进入或刷新完页面后，上下的名字都是一样是因为：scope为true时，子作用域继承了父作用的属性和方法。因此虽然子作用域中没有定义name和age，

但是能从父作用域的myController中继承。因此，上下显示了相同的名字和年龄。

2、输入新名字后，上不变、下变得原因是：我们修改的是子作用域上的name和age，因此下面的名字会改变，上面的名字属于父作用域，父作用域是不能访问子作用域的，

因此上面的名字的值不会改变。

3、scope：{ }

指令的scope部分做如下修改：

scope:{
  name:"@",
  age:"@"
},

这时，载入页面的效果会变为：

我们会发现下面的名字和年龄并没有值，这时因为现在的作用域是隔离的，它并不知道父作用域的属性和方法。我们可以在指令的后面给其赋值，方法如下：

<div my-directive name="aaa" age="33"></div>

页面的载入会变为：

当我们输入新的名字时，效果如下

同样的原因，这个作用域是完全隔离的，因此修改只对指令自身的作用域的属性和方法有效，与其他任何作用域没有关系，myController作用域的名字并不会改变。

以上就是小编为大家带来的浅谈AngularJs指令之scope属性详解全部内容了，希望大家多多支持~

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

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