[AngularJS] 理解AngularJS Directive中的Scope

默认情况下, AngluarJS不会为在一个Controller下的Directive创建一个单独的作用域(Scope). 这个Directive中的所有关于$scope的变量都是在它的Controller中定义, 并且会被其他的在同一Controller中的Directive所共享, 例如以下代码:

  <script>
    (function(angular) {
        angular.module(‘zzIsolateScopeTest‘, [])
            .directive("directiveOne", function () {
                return {
                    link : function($scope, $element, $attr) {
                        $scope.site = "腾讯";
                    }
                };
            })
            .directive("directiveTwo", function () {
                return {
                    link : function($scope, $element, $attr) {
                        $scope.site = "博客";
                    }
                };
            })
            .controller("mainController", function ($scope) {
                $scope.site = "百度";
            });
    })(window.angular);
  </script>
<div data-ng-controller="mainController">
    <div class="row">
        <div class="col-md-3"><a data-directive-one class="btn btn-default btn-block">{{site}}</a></div>
    </div>
    <div class="row">
        <div class="col-md-3"><a data-directive-two class="btn btn-default btn-block">{{site}}</a></div>
    </div>
</div>

打开页面的结果是两个"博客"链接的按钮. 这是因为DirectiveTwo在最后将site的值修改为了"博客", 并且影响到了DirectiveOne原来所修改成的值"腾讯".



AngluarJS引入isloate scope的概念, 使得每个Directive都能拥有自己的$scope变量, 从而不会在多个Directive之间因共享变量而造成数据错误. 使用isolate scope的方法很简单, 只需要在Directive的代码中写入一个属性即可:

scope : {}

示例代码如下:

  <script>
    (function(angular) {
        angular.module(‘zzIsolateScopeTest‘, [])
            .directive("directiveOne", function () {
                return {
                    scope : {},
                    link : function($scope, $element, $attr) {
                        $scope.site = "腾讯";
                    }
                };
            })
            .directive("directiveTwo", function () {
                return {
                    scope : {},
                    link : function($scope, $element, $attr) {
                        $scope.site = "博客";
                    }
                };
            })
            .controller("mainController", function ($scope) {
                $scope.site = "百度";
            });
    })(window.angular);
  </script>

通过这样的方式, directive-one和directive-two都拥有了自己的$scope, 也就是说, 它们将不再使用mainController中的$scope. 那么做这样的修改之后, 页面将会出现什么结果呢?

答案是页面上出现两个"百度"链接按钮.

如上面所说的, 当directive拥有自己的$scope之后, 将不会影响mainController中的$scope, 所以, 这里的两个占位符自然就mainController中的site值来填充. 也就是"百度".

时间: 2024-10-12 08:15:09

[AngularJS] 理解AngularJS Directive中的Scope的相关文章

angulajs 详解 directive 中 的 scope 概念

Directive 是 angularjs 中最重要的概念,我的理解就是自定义html tag, 这个自定的tag 浏览器不会解析,会有angularjs 来动态解析. 比如在html 中添加 <myPannel title="title" description="pannel description"></mypanel>, 这个myPannel tag 浏览器显然不认识,这个其实就是一个 directive. 这个directive 我

AngularJs中,如何在父元素中调用子元素为自定义Directive中定义的函数?

最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆分成多个独立的小方法,也未必要复用它们一样.职责独立等一票好处,会让后期维护更加轻松. 在重构的过程中,我遇到了这样一个问题,先上图: 图一: 这就是我要重构的界面,由于之前时间紧,将这三个Filter和两个button都写在了一个页面中.当时我已经预感到,如果将这里面的状态都写到一个scope上,

AngularJS in Action读书笔记5(实战篇)——在directive中引入D3饼状图显示

前言: "宁肯像种子一样等待  也不愿像疲惫的陀螺  旋转得那样勉强" 这是前几天在查资料无意间看到的一位园友的签名,看完后又读了两遍,觉得很有味道.后来一寻根究底才知这是出资大诗人汪国真之口,出处<她>.且抛开上下文,单从这短短几句,正恰如其分的折射出有一群人,他们穿着不那么fashion,言辞不那么犀利,但是内心某一块地方像是躁动的火山,拥有无尽的动力和激情,矢志不渝种子般投身到技术研究和心得分享当中. 或许每一次的生长都是那么悄无声息,但是无数次的坚持只是为了破土那日

angularjs学习笔记3-directive中scope的绑定修饰符

在angularjs中,一个directive返回一个对象,对象存在很多属性,并且可以在directive中自定义自己的scope,而使用自己的scope是为了防止一个directive被使用在多个地方之间发生相互影响,通常这个scope可以被定义为true或者对象,当这个scope被定义为true时,代表这个指令拥有独立的scope,它被多次使用在多个地方之间不会相互影响,例如: HTML代码 <!doctype html> <html ng-app="MyModule&qu

AngularJS 讲解,四 Directive

AngularJS  Directive 自定义指令(我最喜欢AngularJs的功能之一) 一:什么时候我们会用到directive 1.使html更具语义化,不用深入了解研究代码的逻辑便可知道大致逻辑. 2.抽象出一个自定义组件,可以重复使用. 二:directive的定义及其使用方法   1.下面是一个directive参数详细模板 angular.module('app',[]);//申明一个调用angularjs块 angular.module('app').directive('di

angularjs 指令(directive)详解(2)

原文地址 上一篇我们说到了transclude,那么,我们现在继续讲解之后的内容. 9.scope 可选参数,默认值为false.取值: false - 在这个directive里不会创建新的scope,而是继承父级的scope. true - 为这个directive创建一个新的scope,并继承它的父级的scope. {} - 对象,在这个directive中创建一个新的带隔离的scope,这可以防止读取或者修改父级scope的数据,创建可重用的组件全靠这个了. 对象里的值是如何与父级的sc

转: 理解AngularJS中的依赖注入

理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Provider服务($provide) $provide服务负责告诉Angular如何创造一个新的可注入的东西:即服务(service).服务会被叫做provider的东西来定 义,你可以使用$provide来创建一个provider.你需要使用$provide中的provider方法来定义一个provi

《AngularJS权威教程》中关于指令双向数据绑定的理解

在<AngularJS权威教程>中,自定义指令和DOM双向数据绑定有一个在线demo,网址:http://jsbin.com/IteNita/1/edit?html,js,output,具体代码如下: <!doctype html> <html ng-app="myApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-

angularjs 中的scope继承关系——(2)

转自:http://www.lovelucy.info/understanding-scopes-in-angularjs.html angularjs 中的scope继承关系 ng-include 假设在我们的 controller 中, $scope.myPrimitive = 50; $scope.myObject = {aNumber: 11}; HTML 为: <script type="text/ng-template" id="/tpl1.html&quo