浅谈AngularJs指令之scope属性详解


Posted in Javascript onOctober 24, 2016

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属性详解全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
移动前端图片压缩上传的实例
Dec 06 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
js中对象与对象创建方法的各种方法
Feb 27 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 Javascript
利用JS如何获取form表单数据
Dec 19 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 20 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 #Javascript
PHP捕捉异常中断的方法
Oct 24 #Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 #Javascript
浅谈Angular中ngModel的$render
Oct 24 #Javascript
Javascript vue.js表格分页,ajax异步加载数据
Oct 24 #Javascript
H5移动端适配 Flexible方案
Oct 24 #Javascript
javascript的document中的动态添加标签实现方法
Oct 24 #Javascript
You might like
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
javascript 写类方式之五
2009/07/05 Javascript
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
js加强的经典分页实例
2013/03/15 Javascript
使用js 设置url参数
2013/07/08 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
详细解读Python中的__init__()方法
2015/05/02 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
先进个人事迹材料
2014/01/25 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
庆祝儿童节标语
2014/10/09 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js
Linux中文件的基本属性介绍
2022/06/01 Servers
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python