zoukankan      html  css  js  c++  java
  • AngulaJs -- 隔离作用域

    具有隔离作用域的指令最主要的使用场景是创建可复用的组件

    创建具有隔离作用域的指令需要将scope属性设置为一个空对象{}。如果这样做了,指令的
    模板就无法访问外部作用域了:

    <div ng-controller='MainController'> 
    Outside myDirective: {{ myProperty }} 
    <div my-directive ng-init="myProperty = 'wow, this is cool'"> 
    Inside myDirective: {{ myProperty }} 
    </div> 
    </div> 
    angular.module('myApp', []) 
    .controller('MainController', function($scope) { 
    }) 
    .directive('myDirective', function() { 
    return { 
    restrict: 'A', 
    scope: {}, 
    priority: 100, 
    template: '<div>Inside myDirective {{ myProperty }}</div>' 
    }; 
    }); 
    

    *1. $scope
    与指令元素相关联的当前作用域。
    *2. $element
    当前指令对应的元素。
    *3. $attrs
    由当前元素的属性组成的对象。例如,下面的元素:
    <div id="aDiv"class="box"></div>
    具有如下的属性对象:

    { 
    id: "aDiv", 
    class: "box" 
    }
    

    *4. $transclude
    嵌入链接函数会与对应的嵌入作用域进行预绑定。transclude链接函数是实际被执行用来克隆元素和操作DOM的函数。在控制器内部操作DOM是和AngularJS风格相悖的做法,但通过链接函数就可以实现这个需求。仅在compile参数中使用transcludeFn是推荐的做法。例如,我们想要通过指令来添加一个超链接标签。可以在控制器内的$transclude函数中实
    现,如下所示:

    angular.module('myApp') 
     .directive('link', function() { 
       return { 
        restrict: 'EA', 
        transclude: true, 
        controller: 
            function($scope, $element, $transclude, $log) { 
                $transclude(function(clone) { 
                    var a = angular.element('<a>'); 
                    a.attr('href', clone.text()); 
                    a.text(clone.text()); 
                    $log.info("Created new a tag in link directive"); 
                    $element.append(a); 
            }); 
        } 
    }; 
    }); 
    

    指令的控制器和link函数可以进行互换。控制器主要是用来提供可在指令间复用的行为,但链接函数只能在当前内部指令中定义行为,且无法在指令间复用。
    link函数可以将指令互相隔离开来,而controller则定义可复用的行为。

    通过分享,结交好友~ 如本文对您有益,请给予关注。转载请注明出处!-- 小数
  • 相关阅读:
    11.26
    数组
    JavaScript
    2018.11.26
    input标签
    HPH 函数
    jQuery
    19/1/3数组
    2018/12/26//循环体
    12/25
  • 原文地址:https://www.cnblogs.com/mcat/p/4527836.html
Copyright © 2011-2022 走看看