angularjs中指令的scope作用域
angularjs中指令的作用域方式主要分为三种：
- scope=true;
- scope=false;
- scope={}`这里空批指里面可以指定作用域的方式
下面将分别讲解这三种指令的作用域方式：
scope=false
这种情况下，scope可以使用父作用域中的变量，函数首先让我们创建一个指令，代码如下：
a.html
<div ng-app="MyApp"><div class="container" ng-controller="MyController"><div class="my-info">我的名字是：<span ng-bind="name">span><br/>我的年龄是：<span ng-bind="age">span>div><div class="my-directive" my-directive>div>div>
div>
a.js
angular.module("MyApp", []).controller("MyController", function ($scope) {//J1 这里我们在作用域里初始化两个变量$scope.name = "dreamapple";$scope.age = 20;//J2 创建一个方法，修改我们创建的对象的年龄$scope.changeAge = function () {$scope.age = 22;}
})//J3 创建我们的指令，指令名字为"myDirective".directive("myDirective", function () {var obj = {//J4 指令的声明模式为 "AE" 属性和元素restrict: "AE",//J5 指令继承父作用域的属性和方法scope: false,replace: true,template: "" +"下面部分是我们创建的指令生成的
" +"我的名字是：
" +"我的年龄是：" +""+" "}return obj;
});解释一下上面的代码，在指令定义部分，我们可以直接使用父作用域中的name和age。而且，变了指令中的name，父作用域中的她会变。
scope=true
这个就是把上面代码中的false改成true，所以代码就不用贴了。如上代码所示，当这样设置时，要示我们指令自己创建一个新的作用域而不是使用父的，但是它还是会继承来自父的一些变量和函数。这些来自父的变量是用来初始化的，如果你变了变量的值，那么新建的变量是会在新的作用域中的。、
而如果是false，你改变了就会把父中的变量值也变了，因为他们中是一个。
scope={}
先上代码吧
a.html
<div ng-app="MyApp"><div class="container" ng-controller="MyController"><div class="my-info">我的名字是：<span ng-bind="name">span><br/>我的年龄是：<span ng-bind="age">span><br />`这里写代码片`div><div class="my-directive" my-directive my-name="{{name}}" age="age" change-my-age="changeAge()">div>div>
div>a.js
angular.module("MyApp", []).controller("MyController", function ($scope) {$scope.name = "dreamapple";$scope.age = 20;$scope.changeAge = function(){$scope.age = 0;}
}).directive("myDirective", function () {var obj = {restrict: "AE",scope: {name: '@myName',age: '=',changeAge: '&changeMyAge'},replace: true,template: "" +"下面部分是我们创建的指令生成的
" +"我的名字是：
" +"我的年龄是：
" +"在这里修改名字：
" +"" +" "}return obj;
});
*@ 当指令编译到模板的name时，就会到scope中寻找是否含有name的键值对，如果存在，就像上面那样，看到@就知道这是一个单向的数据绑定，然后寻找原来的那个使用指令的元素上（或者是指令元素本身）含有这个值的属性即my-name={{name}}，然后在父作用域查找{{name}}的值，得到之后传递给模板中的name。重点内容
如上所示，在代码中，我们设置scope=false,这时候我们可以把一部分设置为false(和父中同步)，一部分变量设置为true（和父中不同步，有自己的model）.*
@(针对于变量的，子相当于有自己的独立作用域，所以子中的变了就是父中的不会变)
这是一个单项绑定的前缀标识符
使用方法：在元素中使用属性，好比这样
=（针对变量的，子中不会创建自己的作用域，如果子中的变量值变了，父中的不会变）
这是一个双向数据绑定前缀标识符
使用方法：在元素中使用属性，好比这样
&（针对函数的）
这是一个绑定函数方法的前缀标识符
使用方法：在元素中使用属性，好比这样
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！