AngularJS指令隔離作用域和父作用域

Question

我試圖實現遞歸指令，它似乎想獲得它很好地工作，我需要定義一個分離的范圍以及訪問父范圍。 基本上，我想我的指令來訪問設置為在指令本身的屬性變量，但我也希望能夠訪問控制器的范圍設置變量和方法。 有沒有辦法將兩者結合起來？ 我已經嘗試了transclude，但是我想我不確定我是否正確使用了它。 這是我的問題的一個小例子，我希望指令中的每個“孩子”都能夠調用函數sayHi() ： http : //jsfiddle.net/n8dPm/655/

Answer 1

您必須將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); 
                });
            };
        }
    };
});