AngularJS指令隔离范围和父范围

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJS指令隔离范围和父范围相关的知识,希望对你有一定的参考价值。

我正在尝试实现一个递归指令,它似乎让它很好地工作我需要定义一个隔离范围以及访问父范围。基本上我希望我的指令能够访问在指令本身上设置为属性的变量,但我也希望能够访问控制器范围中设置的变量和方法。有没有办法将两者结合起来?我试过转换,但我想我不完全确定我是否正确使用它。这是我的问题的一个小例子,我希望指令中的每个'孩子'能够调用函数sayHi()http://jsfiddle.net/n8dPm/655/

答案

您必须将sayHi函数传递给您的指令。指令创建自己的范围,所以sayHi函数不是你的指令范围的一部分,允许它的方式是通过创建一个新的prop传递它。

html

<div ng-app="myapp">
    <div ng-controller="TreeCtrl">
        <tree family="treeFamily"
          say-hi="sayHi(name)"
         ngTransclude></tree>
    </div>
</div>

JS

var module = angular.module('myapp', []);

module.controller("TreeCtrl", function($scope) {
    $scope.treeFamily = {
        name : "Parent",
        children: [{
            name : "Child1",
            children: [{
                name : "Grandchild1",
                children: []
            },{
                name : "Grandchild2",
                children: []
            }]
        }, {
            name: "Child2",
            children: []
        }]
    };
    $scope.sayHi = function(name){
        alert(name+' says hello!')
    }
});

module.directive("tree", function($compile) {
    return {
        restrict: "E",
        scope: {
            family: '=',
          sayHi : '&'
         },
        transclude: true,
        template: 
            '<p>{{ family.name }}</p>'+
            '<ul>' + 
                '<li ng-repeat="child in family.children">' + 
                    '<tree family="child" say-hi="sayHi(name)"></tree>' +
                    '<button ng-click="sayHi({name : child.name})">Say Hi</button>' +
                '</li>' +
            '</ul>',
        compile: function(tElement, tAttr) {
            var contents = tElement.contents().remove();
            var compiledContents;
            return function(scope, iElement, iAttr) {
                if(!compiledContents) {
                    compiledContents = $compile(contents);
                }
                compiledContents(scope, function(clone, scope) {
                         iElement.append(clone); 
                });
            };
        }
    };
});

以上是关于AngularJS指令隔离范围和父范围的主要内容,如果未能解决你的问题,请参考以下文章

为啥我应该在 AngularJS 中使用隔离范围指令?

如何在 AngularJS 中对隔离范围指令进行单元测试

在 AngularJS 中从没有隔离范围的指令调用控制器函数

AngularJS自定义验证指令 - 如何避免使用隔离范围

访问指令的隔离范围与嵌入的内容

为什么多个指令不能在同一个元素上要求隔离范围?