设为首页收藏本站

 找回密码
 注册论坛

QQ登录

只需一步,快速开始

用百度帐号登录

只需两步,快速登录

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 294|回复: 0

浅谈AngularJs指令之scope属性详解

[复制链接]

签到天数: 36 天

[LV.5]常住居民I

发表于 2016/11/11 11:48 | 显示全部楼层 |阅读模式 |搜狗浏览器|Windows 7
天涯海角搜一下: 百度 谷歌 360 搜狗 有道 雅虎 必应 即刻
  上面是定义一个指令的主体框架,该方法接受两个参数:

  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作用域的名字并不会改变。www.9ask.cn/zhuzhou/
[发帖际遇]: 柠檬墨绿色 捡了钱没交公 威望 降了 1 . 幸运榜 / 衰神榜
欢迎光临IT技术交流论坛:http://bbs.itzmx.com/
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册论坛 用百度帐号登录新浪微博账号登陆

本版积分规则

手机版|Archiver|Mail me|网站地图|IT技术交流论坛 ( 闽ICP备13013206号-7 )

GMT+8, 2018/6/20 05:54 , Processed in 0.255106 second(s), 45 queries , Gzip On, Memcache On.

Powered by itzmx!

© 2011-2018 sakura

快速回复 返回顶部 返回列表