Question

我有一个带有children指令的自定义指令：

<rp-nav>
    <rp-nav-item cat="1"></rp-nav-item>
    <rp-nav-item cat="2"></rp-nav-item>
    <rp-nav-item cat="3"></rp-nav-item>
    <rp-nav-item cat="4"></rp-nav-item>

    <rp-flyout></rp-flyout>
</rp-nav>

以下是我定义的模块：

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

app.directive('rpNav', function() {
    return {
        restrict: 'E',
        controller: function($scope) {
            $scope.currentItem = 'none'; //initialize currentItem
            this.setCurrentItem = function(itemId) {
                $scope.currentItem = itemId;
            }
        },
    };
});

app.directive('rpNavItem', function() {
    return {
        restrict: 'E',
        template: function(el, attrs) {
            return '<p>item {{currentItem}} ' + attrs.cat;
        },
        require: '^rpNav',

        link: function(scope, el, attrs, nav) {
            el.on('click', function() {
                nav.setCurrentItem(attrs.cat);
            });
        }
    };
});

app.directive('rpFlyout', function() {
    return {
        restrict: 'E',
        template: '<p style="background-color: lightblue">{{currentItem}}</p>'
    };
});

想法是单击任何项目并使 rp-flyout 元素显示有关所单击的 rp-nav-item 的信息。范围变量 currentItem 会在点击时更改，但 rp-flyout 中的模板不会更新。为实现这一目标，我错过了什么？而且，这是解决这个问题的“最佳实践”方式。

这是plunker

Answer 1

要扩展注释，指令本身并不是摘要周期的一部分，因此您需要在scope.$apply()处理程序中添加el.click以触发摘要周期并更新模板绑定。

el.on('click', function() {
  nav.setCurrentItem(attrs.cat);
  scope.$apply();
});

在范围更改后，子指令模板不更新

1 个答案: