浅谈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 相关文章推荐
javascript一些实用技巧小结
Mar 18 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
浅谈JavaScript闭包
Apr 09 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
js实现文章目录索引导航(table of content)
May 10 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 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
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
解析strtr函数的效率问题
2013/06/26 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
Javascript - HTML的request类
2007/01/09 Javascript
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
创业计划书中包含的9个方面
2013/12/26 职场文书
自我鉴定书面格式
2014/01/13 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书