一、概念说明

  可以是true、 false 、哈希对象 {}

  1、true

    新创建了一个作用域,且继承了父作用域;在初始化的时候,用了父作用域的属性和方法去填充我们这个新的作用域。它和父作用域不是同一个作用域。

  2、false 默认(不指定时候 )

    创建的指令和父作用域(其实是同一个作用域)共享同一个model模型,在指令中修改模型数据,会反映到父作用域的模型中。

  3、{}

    新创建了一个作用域,不继承继承了父作用域。表示一个独立的作用域 isolated

    例子:

    scope :

    {

      name:'@',//结果就是test

      detail:'=', //结果要通过$scope.detail计算

      onUpdate:'&'//绑定一个事件

    }

    <user-details name ='test' detail='detail', on-update='updateIt(times)'></user-details>

 二、例子

1、scope: false(或不写即默认false)

  不产生新作用域,指令的作用域和父作用域是同一个对象

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<my-directive></my-directive>
<my-directive></my-directive>
</div> <script type="text/javascript">
var myAppModule = angular.module("myApp",[]); myAppModule
.controller('MyController', function($scope){
    $scope.name = '2222';
})
.directive("myDirective",function(){
return {
restrict:'AE',
scope: false,//或不写即默认false,指令的作用域和父作用域是同一个对象
template:'<div><input type="text" ng-model="name"/>{{name}}</div><br>'
};
});
</script>
</body>
</html>

  运行结果 :

  分析:一个输入改变,四个位置的内容一起改变。

  作用域分析:ng-app产生rootScope,ng-controller指令产生一个作用域scope,两个指令myDirective,由于scope: false(或不写即默认false),指令的作用域和父作用域是同一个对象。一共4个作用域。

  所以,name在一个地方变了,就所有地方变。

2、scope: true

  产生新作用域,而且继承父作用域属性和方法。两个指令作用域互相对立,而且都继承自父作用域(ng-controller产生)。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<my-directive></my-directive>
<my-directive></my-directive>
</div> <script type="text/javascript">
var myAppModule = angular.module("myApp",[]); myAppModule
.controller('MyController', function($scope){
$scope.name = '2222';
})
.directive("myDirective",function(){
return {
restrict:'AE',
scope: true,
template:'<div><input type="text" ng-model="name"/>{{name}}</div><br>'
};
});
</script>
</body>
</html>

  运行结果;

  

  两行数据立变化,即每个指令作用域互相独立,且继承父作用域。

3、scope: {}

  产生独立新作用域,而且父作用域无关。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<my-directive></my-directive>
<my-directive></my-directive>
</div> <script type="text/javascript">
var myAppModule = angular.module("myApp",[]); myAppModule
.controller('MyController', function($scope){
$scope.name = '2222';
})
.directive("myDirective",function(){
return {
restrict:'AE',
scope: {},
template:'<div><input type="text" ng-model="name"/>{{name}}</div><br>'
};
});
</script>
</body>
</html>

  运行结果,刚开始运行,都是空,因为,没有继承父作用域的name

  

  输入一个输入框后,只跟指令内的作用域同步

  

  输入另一个,两个指令间不互相影响

  

4、{}中的@

  字符串绑定,即,把内容直接当做字符串输出,但是{{str2}}(<my-directive content="{{str2}}"></my-directive>),还是会解析成字符串再输出。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<my-directive content="test string"></my-directive>
<my-directive content="{{str2}}"></my-directive>
  <my-directive content="test()"></my-directive>
</div> <script type="text/javascript">
var myAppModule = angular.module("myApp",[]); myAppModule
.controller('MyController', function($scope){
     $scope.str1 = "hello";
$scope.str2 = "world";
$scope.str3 = "angular";
})
.directive("myDirective",function(){
return {
restrict:'AE',
scope: {
    content:'@'
},
template:'<div>{{content}}</div>'
};
});
</script>
</body>
</html>

  运行结果:

 

  第一个和第三个都是字符串原样输出,第二个会解析后输出。

5、{}中=

  变量绑定

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
ctrl:<input type="text" ng-model="testname"><br>
directive:<my-directive name="testname"></my-directive>
</div> <script type="text/javascript">
var myAppModule = angular.module("myApp",[]); myAppModule
.controller('MyController', function($scope){
    $scope.testname="my name is hyx";
})
.directive("myDirective",function(){
return {
restrict:'AE',
scope:{
name:'='
},
template:'<input type="text" ng-model="name">',
repalce:true
};
});
</script>
</body>
</html>

  解析过程:

  (1 )、在控制器MyController对应的div中,定义了一个变量ng-model —— testname。

  (2)、 testname对应的是输入框中输入的值。

  (3 )、然后把这个变量当做一个参数传递给my-directive这个标签的name属性。

  (4)、 在my-directive标签中,又把这个name绑定到模板中的一个输入框内。

  最终两个输入框的内容被连接起来,无论改变哪一个输入框内的值,testname与name都会发生改变。即通过my-directive标签内的属性依赖关系把 testname与name连接在一起,

6、{}中的&

  方法绑定,当做方法执行,sayHello,sayNo,参数动态绑定到输入框。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController"> <my-directive say="sayHello(name)"></my-directive>
<my-directive say="sayNo(name)"></my-directive>
</div> <script type="text/javascript">
var myAppModule = angular.module("myApp",[]); myAppModule
.controller('MyController', function($scope){
     $scope.sayHello = function(name){
console.log("hello !"+ name);
};
$scope.sayNo = function(name){
console.log("no !"+ name);
};
})
.directive("myDirective",function(){
return {
restrict:'AE',
scope:{
say:'&'
},
template:'<input type="text" ng-model="username"/><br>'+
'<button ng-click="say({name:username})">click</button><br>',
repalce:true
};
});
</script>
</body>
</html>

  通过say在scope中的定义,angular知道了say对应的是个方法。

  通过{name:username}的关联,知道了传入的是username。

AngularJs 指令中 的Scope属性的更多相关文章

  1. angularjs指令中的scope

    共享 scope 使用共享 scope 的时候,可以直接从父 scope 中共享属性.因此下面示例可以将那么属性的值输出出来.使用的是父 scope 中定义的值. js代码: app.controll ...

  2. 【转】angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  3. angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  4. AngularJS自定义指令directive:scope属性 (转载)

    原文地址:http://blog.csdn.net/VitaLemon__/article/details/52213103 一.介绍: 在AngularJS中,除了内置指令如ng-click等,我们 ...

  5. angularjs指令中scope参数 true、false、{} 的区别详解

    scope 有三个参数 true.false.{} scope 默认是 false,当 scope设置为true时,会从父作用域继承并创建一个新的作用域对象, 按照true .false的反向思维,我 ...

  6. angularjs指令中的compile与link函数详解(转)

    http://www.jb51.net/article/58229.htm 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link, ...

  7. angularjs指令中的compile与link函数详解补充

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你 ...

  8. AngularJs -- 指令中使用子作用域

    下面将要介绍的指令会以父级作用域为原型生成子作用域.这种继承的机制可以创建一个隔离层,用来将需要协同工作的方法和数据模型对象放置在一起. ng-app和ng-controller是特殊的指令,因为它们 ...

  9. AngularJS 指令中的require

    require参数可以被设置为字符串或数组,字符串代表另外一个指令的名字.require会将控制器注入到其值所指定的指令中,并作为当前指令的链接函数的第四个参数.字符串或数组元素的值是会在当前指令的作 ...

随机推荐

  1. $ each() 小结

    each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, JSON 等等在javaScript开发过程中使用$ ...

  2. 1.2 Java中的注释

    Eclipse中的快捷键  单行注释   Ctrl+/ 多行注释    Ctrl+Shift+/  文档注释    Shift +Alt+j /** * @author Lenovo * 文档注释 * ...

  3. post方式发送请求报文

    $url="http://www.test.com/04_demo_weather.php?id=5"; $ci=curl_init($url); curl_setopt($ci, ...

  4. [Robot Framework] SikuliLibrary的关键字执行依赖java进程,但是上次的java进程如果没有杀掉,robot framework控制台的日志出不来,怎么办?

    如果在suite的setup里面杀掉java进程:AutoItLibrary.Run | taskkill /F /IM java.exe 执行sikuli的关键字会报这样的错误: Connectio ...

  5. 分布式版本控制工具:git与Mercurial(zz)

    分布式版本控制工具:git与Mercurial [收藏此页] [打印]   作者:cyfdecyf  2007-12-26 内容导航: 第1页   [IT168 技术文档]    说到版本控制工具,很 ...

  6. 学习第一天-JAVA

    第一题打印1到1000的奇数 public class OneToThousandOdd{ public static void main(String[] args) { short num = 1 ...

  7. 将Struts放入spring框架中

    第一步:写好ACtion package com.inspur.actions; import javax.servlet.http.HttpServletRequest;import javax.s ...

  8. spoj 7258 SUBLEX(求第k大字串

    其实对sam的拓扑排序我似懂非懂但是会用一点了. /** @xigua */ #include <stdio.h> #include <cmath> #include < ...

  9. css过渡动画

    具体代码:1.水平翻转-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);-o-transform:scale(-1,1);transfo ...

  10. Bubble(冒泡排序)————Java

    用Java进行冒泡排序的代码,利用一个flag进行优化算法: import java.util.Scanner; public class Bubble_Sort { private static i ...