Question

在我的Angularjs项目中，我遇到了指令嵌套和变量传递的问题。

我做了一个指令标题：

.directive('header', [function() {
    return {
        restrict: 'E',
        scope: {},
        templateUrl: 'header.tpl.html',
        link: function(scope, elem, attrs) {
            scope.showDescriptions = false;
            scope.expandDescriptions = function() {
                ...
                scope.showDescriptions = !scope.showDescriptions;
            }
        }
    }
}

在模板中，使用另一个指令：

<div class="description" votable show-vote="showDescriptions"></div>

和可投票指令：

.directive('votable', [function() {
    return {
        restrict: 'A',
        scope: {
            showVote: '='
        },
        templateUrl: 'votable.tpl.html',
    }
}

在votable.html中

：

<div class="vote" ng-show="showVote"></div>

当我运行此选项时，应隐藏投票图标以启动，但它正在显示。

我有另一个元素+指令组合：

<div expandable expand="expandDescriptions" ng-show="showDescriptions"></div>

此指令在开始时隐藏，但在扩展后，即使它切换showDescriptions变量也无法折叠。

我是否需要做一些特殊的事情来将变量从指令范围传递到子指令的范围内？

Answer 1

使用嵌套指令时，子指令将在运行父指令的 link 函数之前绑定其数据。如果您需要在父作用域中使用某些值以使子指令正确呈现，则需要将其绑定在父指令的 preLink 中。添加一个编译函数，使其返回 preLink 函数，它应该没问题，如下所示：

compile: function() {
    return {
        pre: function preLink(scope, elem, attrs) {
            scope.showDescriptions = false;
            scope.expandDescriptions = function() {
            ...
            scope.showDescriptions = !scope.showDescriptions;
        }
    }
}

Angularjs指令将变量传递给子指令

1 个答案: