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

每当一个指令被创建的时候，都会有这样一个选择，是继承自己的父作用域（一般是外部的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(作用域)介绍全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

  • AngularJS基础学习笔记之简单介绍

    AngularJS是一个JavaScript框架.它可以通过<script>标记被添加到HTML页面中. AngularJS通过指令对HTML属性进行了扩展,然后通过表达式将数据绑定到HTML元素中. AngularJS是一个JavaScript框架 AngularJS是一个JavaScript框架,它是由JavaScript语言编写的类库. AngularJS以JavaScript文件的形式进行发布,我们可以通过script标记将它添加到web页面中: 复制代码 代码如下: <scri

  • AngularJS中的Promise详细介绍及实例代码

    Angular中的Promise 在用jQuery的时候就知道 promise 是 Js异步编程模式的一种模式,但是不是很明白他跟JQuery的deferred对象有什么区别.随着公司项目的进行,要跟后台接数据了,所以决定搞定它. Promise Promise是一种模式,以同步操作的流程形式来操作异步事件,避免了层层嵌套,可以链式操作异步事件. 我们知道,在编写JavaScript异步代码时,callback是最最简单的机制,可是用这种机制的话必须牺牲控制流.异常处理和函数语义化为代价,甚至会

  • AngularJS 模型详细介绍及实例代码

    AngularJS ng-model 指令 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. ng-model 指令 ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定. AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="

  • AngularJS Bootstrap详细介绍及实例代码

    AngularJS Bootstrap详细介绍及实例代码

    AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架. 查看 Bootstrap教程. Bootstrap 你可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.

  • AngularJs每天学习之总体介绍

    AngularJs每天学习之总体介绍

    这周末在家呆了两天,正好中午闲暇时间继续分享Angularjs相关,今天主要分享Angularjs总体介绍及数据绑定部分内容,下面直接进入主题. 1.基本概念: AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的伪静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事,通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足. 2.版本 angualrjs1.x:目前比较稳定版

  • AngularJS HTML编译器介绍

    概览 AngularJS的HTML编译器能让浏览器识别新的HTML语法.它能让你将行为关联到HTML元素或者属性上,甚至能让你创造具有自定义行为的新元素.AngularJS称这种行为扩展为"指令" HTML在编写静态页面时,有很多声明式的结构来控制格式.比如你要把某个内容居中,你不必告诉浏览器"去找到窗口的中点位置,然后跟内容的中间结合".你只需要添加一个 align="center" 的属性给需要内容居中的元素就行了.这就是声明式语言的强大之处

  • Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍

    Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍

    ng-repeat-start与ng-repeat-end时AngularJS(1.2.x)扩展的,使用这两个指令可以灵活控制遍历形式. 例如: index.html <div class="uk-panel" ng-controller="UserCtrl"> <ul class="uk-list uk-list-striped"> <li ng-repeat-start="user in users&q

  • 3个可以改善用户体验的AngularJS指令介绍

    1.头像图片 为了在你的应用中展示头像图片,你需要使用用户的电子邮件地址,将地址转换为小写并使用md5加密该字符串.所以聪明的做法是使用指令来做到这些,并且可以复用. /* * A simple Gravatar Directive * @example * <gravatar-image email="test@email.com" size="50"></gravatar-image> */ app.directive('gravatar

  • AngularJS中的包含详细介绍及实现示例

    AngularJS中的包含详细介绍及实现示例

    AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 在 HTML 中包含 HTML 文件 在 HTML 中,目前还不支持包含 HTML 文件的功能. 服务端包含 大多服务端脚本都支持包含文件功能 (SSI: Server Side Includes). 使用 SSI, 你可在 HTML 中包含 HTML 文件,并发送到客户端浏览器. PHP 实例 <?php require("navigation.php"); ?> 客户端包

  • AngularJS 执行流程详细介绍

    AngularJS 执行流程详细介绍

    一.启动阶段 大家应该都知道,当浏览器加载一个HTML页面时,它会将HMTL页面先解析成DOM树,然后逐个加载DOM树中的每一个元素节点.我们可以把AngularJS当做一个类似jQuery的js库,我们通过<script>标签引入到HTML中,那么此时Angular就做为一个普通的DOM节点等待浏览器解析,当浏览器解析到这个节点时,发现它是一个js文件,那么浏览器会停止解析剩余的DOM节点,开始执行这个js(即angular.js),同时Angular会设置一个事件监听器来监听浏览器的DOM

随机推荐