且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

在angularjs动态指令

更新时间:2022-10-27 16:22:31

通过定义范围:在你的指令{} ,它正在创建一个隔离范围
因此父范围是从现在指令不可见的。

如果您想引用父范围,那么你可以把范围:真正的共享
范围(同指令之间),并省略只是正常范围嵌套声明范围。
或者,如果你只想引用父 $ scope.foo ,您可以定义
像你这样的明确的范围变量已经在孩子完成指令

The directive's attributes don't change when the scope is updated, they still keep the initial value. What am I missing here?

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 (based on angular tabs example on front-page)

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>'
    };
});

By defining scope: {} in your directive, it is creating a isolated scope. So the parent scope is now invisible from the directive.

If you want to refer the parent scope, then you can put scope: true for shared scope (among same directives) and omit the scope declaration for just normal scope nesting. Or if you want to just refer $scope.foo of the parent, you can define explicit scope variables like you've done in the child directive.