angularjs - angularjs 中的动态指令

Question

当范围更新时，指令的属性不会改变，它们仍然保持初始值。我在这里缺少什么？

HTML

<ul class="nav nav-pills nav-stacked" navlist>
    <navelem href="#!/notworking/{{foo}}"></navelem>
    <navelem href="#!/working">works great</navelem>
</ul>

<p>works: {{foo}}</p>

Javascript
(基于首页上的 Angular 选项卡示例)

angular.module('myApp.directives', []).
directive('navlist', function() {
    return {
        scope: {},
        controller: function ($scope) {
            var panes = $scope.panes = [];

            this.select = function(pane) {
                angular.forEach(panes, function(pane) {
                    pane.selected = false;
                });
                pane.selected = true;
            }

            this.addPane = function(pane) {
                if (panes.length == 0)
                    this.select(pane);
                panes.push(pane);
            }

        }
    }
}).
directive('navelem', function() {
    return {
        require: '^navlist',
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: { href: '@href' },
        link: function(scope, element, attrs, tabsCtrl) {
            tabsCtrl.addPane(scope);
            scope.select = tabsCtrl.select;
        },
        template:
            '<li ng-class="{active: selected}" ng-click="select(this)"><a href="{{href}}" ng-transclude></a></li>'
    };
});

Answer 1

通过定义 scope: {}在您的指令中，它正在创建一个 isolated scope .
所以父作用域现在从指令中是不可见的。

如果你想引用父作用域，那么你可以放 scope: true用以分享
范围(在相同的指令中)并省略仅正常范围嵌套的范围声明。
或者，如果您只想引用 $scope.foo的 parent ，你可以定义
显式范围变量，就像您在 child 指令中所做的那样。