• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > 关于angularJs指令的Scope(作用域)介绍

关于angularJs指令的Scope(作用域)介绍

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含angularjs scope,angularjs指令,angularjs指令大全,angularjs自定义指令,angularjs内置指令等相关知识,希望在学习及工作中可以帮助到您

每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{};默认情况下是false。

1.scope = false

JS 代码:

html 代码:

result:

修改文本框的内容,两个名字都会变,实际上修改的是同一个$scope的name属性。

2. scope=true

修改上面的JS代码,将指令中的:scope:false修改为scope:true

然后我们再试着在我们的input输入框中写一些字符串,会发现,指令中的那个name发生了变化,但是指令外的那个name却没有发生变化,这说明了一个问题。

当我们将scope设置为true的时候,我们就新创建了一个作用域,只不过这个作用域是继承了我们的父作用域;我觉得可以这样理解,我们新创建的作用域是一个新的作用域,只不过在初始化的时候,用了父作用域的属性和方法去填充我们这个新的作用域。它和父作用域不是同一个作用域。
当我们将scope设置为false的时候,我们创建的指令和父作用域(其实是同一个作用域)共享同一个model模型,所以在指令中修改模型数据,它会反映到父作用域的模型中。

3. scope={}

当我们将scope设置为{}时,意味着我们创建的一个新的与父作用域隔离的新的作用域,这使我们在不知道外部环境的情况下,就可以正常工作,不依赖外部环境。

JS代码:

html代码:

result:

修改文本框内容只有指令中的名字会被修改.

scope: {@=&}

@
这是一个单项绑定的前缀标识符
使用方法:在元素中使用属性,好比这样<div my-directive my-name="{{name}}"></div>,注意,属性的名字要用-将两个单词连接,因为是数据的单项绑定所以要通过使用{{}}来绑定数据。

=
这是一个双向数据绑定前缀标识符
使用方法:在元素中使用属性,好比这样<div my-directive age="age"></div>,注意,数据的双向绑定要通过=前缀标识符实现,所以不可以使用{{}}。

&
这是一个绑定函数方法的前缀标识符
使用方法:在元素中使用属性,好比这样<div my-directive change-my-age="changeAge()"></div>,注意,属性的名字要用-将多个个单词连接。

以上就是小编为大家带来的关于angularJs指令的Scope(作用域)介绍全部内容了,希望大家多多支持~

</div>

您可能想查找下面的文章:

  • AngularJS的ng-repeat指令与scope继承关系实例详解
  • AngularJS深入探讨scope,继承结构,事件系统和生命周期
  • 关于angularJs指令的Scope(作用域)介绍
  • 浅谈AngularJs指令之scope属性详解
  • AngularJs Scope详解及示例代码
  • angularjs 源码解析之scope
  • AngularJS入门教程之Scope(作用域)

相关文章

  • 2017-05-30AngularJS中的API(接口)简单实现
  • 2017-08-02angularJS中$watch监听不到输入控件(input、textarea)的空格输入问题
  • 2017-05-30浅谈angularjs module返回对象的坑(推荐)
  • 2017-05-30AngularJS实现页面定时刷新
  • 2017-05-30AngularJs bootstrap搭载前台框架——基础页面
  • 2017-05-30Angularjs编写KindEditor,UEidtor,jQuery指令
  • 2017-05-30Angular 输入框实现自定义验证功能
  • 2017-05-30Ionic+AngularJS实现登录和注册带验证功能
  • 2017-05-30AngularJS入门教程之Select(选择框)详解
  • 2017-05-30AngularJs基于角色的前端访问控制的实现

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Angularjs单选改为多选的开发过程及问题解析
    • 移除AngularJS下URL中的#字符的方法
    • angularjs学习笔记之简单介绍
    • angularJS中$apply()方法详解
    • AngularJS Ajax详解及示例代码
    • Angular Module声明和获取重载实例代码
    • AngularJS 入门教程之事件处理器详解
    • AngularJS iframe跨域打开内容时报错误的解决办法
    • AngularJS基础 ng-csp 指令详解
    • Angularjs中使用指令绑定点击事件的方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有