AngularJS指令如何将变量传递给子指令

Question

在我的AngularJS项目中，我遇到了一个关于指令嵌套和变量传递的问题。

我创建了一个名为header的指令：

.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变量也无法折叠。

我需要做一些特殊的事情来将一个变量从指令的作用域传递到子指令的作用域吗？

- Chaseph

---

你的示例在fiddle上运行正常 http://jsfiddle.net/tasnimreza/kuSUS/2/ - Tasnim Reza

我想我把代码简化得有点过头了。等我有更多时间时，我会加强它。我注意到的一个问题是，在子指令的链接时间，showDescriptions属性不被解析为变量，而是作为字符串“showDescriptions”传递给子指令。 - Chaseph

Answer 1

在嵌套指令中，子指令将在父指令的link函数运行之前绑定它的数据。如果您需要在子指令正确呈现之前使父级范围中的某些值可用，则需要在父指令的preLink中绑定它们。添加一个编译函数以返回您的preLink函数，就可以了，如下所示：

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

- alexp

---

我刚刚弄清楚了，但我无法真正解释它。通过作用域传递的变量在某种程度上被一个带有display: block !important;的过渡CSS类中断了。移除这个与指令无关的CSS类后，作用域就像我期望的那样工作了。 - Chaseph