在angularjs动态指令 [英] dynamic directives in angularjs

问题描述

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

HTML

 ＆LT; UL类=净值资产净值药丸导航叠navlist＆GT;
    ＆LT;＃！/ notworking / {{富}}navelem HREF =＆GT;＆LT; / navelem＆GT;
    ＆LT; navelem HREF =＃/工作！＆GT;的伟大工程＆LT; / navelem＆GT;
＆LT; / UL＆GT;＆LT; P＆GT;工程：{{}富}＆LT; / P＆GT;
 

的JavaScript
（基于头版上的角选项卡为例）

  angular.module（'myApp.directives'，[]）。
指令（navlist'，函数（）{
    返回{
        范围： {}，
        控制器：函数（$范围）{
            变种窗格= $ scope.panes = [];            this.select =功能（窗格）{
                angular.forEach（窗格功能（窗格）{
                    pane.selected = FALSE;
                }）;
                pane.selected = TRUE;
            }            this.addPane =功能（窗格）{
                如果（panes.length == 0）
                    this.select（面板）;
                panes.push（面板）;
            }        }
    }
}）。
指令（navelem'，函数（）{
    返回{
        要求：'^ navlist'，
        限制：'E'，
        更换：真实，
        transclude：真实，
        适用范围：{HREF：@href}，
        链接：功能（范围，元素，ATTRS，tabsCtrl）{
            tabsCtrl.addPane（范围）;
            scope.select = tabsCtrl.select;
        }，
        模板：
            '＆LT;李纳克级={活跃：选择}NG点击=选择（本）＆GT;＆LT; A HREF ={{HREF}}NG-transclude＆GT;＆LT; / A＆GT;＆LT; /立GT;'
    };
}）;
 

解决方案

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

如果您想引用父范围，那么你可以把范围：真正的共享
范围（同指令之间），并省略只是正常范围嵌套声明范围。
或者，如果你只想引用父 $ 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.

这篇关于在angularjs动态指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！