javascript - 如何使嵌入元素的范围与隔离范围相同/继承

Question

我有一个 navbar 指令和 collapseIcon 指令。我正在使用 angularJS 1.2.1。 collapseIcon 指令是 navbar 内的子元素。

<navbar>
    <collapse-icon></collapse-icon>
</navbar>

navbar 指令有一个带有 toggle() 函数的隔离范围，我希望 collapseIcon 的 范围原型(prototype)地(？)继承自隔离范围。为此，我阅读了在 prelink() 函数中使用“transclude”函数(我在下面将其称为链接器)。

我做了很多 console.log() 语句，我最初看到 collapseIcon 的范围与 navbar 的范围相同但由于某种原因它又变回来了。

这是 js fiddle :https://jsfiddle.net/67cgam3h/1/

这是代码:

app.directive('navbar', function () {
    return {
        transclude: true,
        require:"navbar",
        replace: true,
        restrict: 'E',
        scope: {
        },
        template: '<div class="navbar" ng-transclude></div>',
        controller: function ($scope) {
            this.expanded = false;
            var that = this;
            $scope.toggle = function () {
                if (that.expanded) {
                    $scope.contract();
                } else {
                    $scope.expand();
                }                
            }
        },
        link : {
            pre: function (scope, element, attrs, navbarCtrl, linker) {
                scope.expand = function () {
                    var height = element.prop('scrollHeight');
                    element.css('height', height + "px");
                    navbarCtrl.expanded = true;
                }
                scope.contract = function () {
                    element.css('height', '42px'); // hard-coded default height
                    navbarCtrl.expanded = false;
                }
                console.log('navbar scope');
                console.log(scope);
                console.log('navbar linking');
                linker(scope, function(clone) { // set the transcluded element's scope
                    console.log('appending navbar elements');
                    element.append(clone);
                });
            }
        }
    }
});

app.directive('collapseIcon', function () {
    return {
        restrict: 'E',
        controller: function ($scope) {
            console.log("collapseIconScope:");
            console.log($scope);
            $scope.test = function () {
                console.log($scope);
            }
        },
        link: function (scope, element, attrs) {
        },
        template: '\
<div class="collapse-icon" ng-click="test()">\
<span class="icon-line"></span>\
<span class="icon-line"></span>\
<span class="icon-line"></span>\
</div>'
    }
});

Answer 1

您会看到 2 个不同的作用域，因为您嵌入了两次:一次使用模板中的 ng-transclude，另一次使用名为 linker 的嵌入函数。

带有 ng-transclude 的嵌入作用域通常继承自指令的父级(即外部作用域)，而您的嵌入函数使用指令的作用域作为嵌入作用域。

根据您的要求，您需要手动创建一个继承自指令隔离范围的子范围:

// navBar directive's function
pre: function (scope, element, attrs, navbarCtrl, transclude) {
   var childScope = scope.$new(false);
   // ...

   transclude(childScope, function(clone){
      element.append(clone);
   })
}