Question

我正在使用＆＃39;小部件创建一个页面＆＃39;。我已经创建了指令/控制器/工厂/模板文件，当每页只使用1个时，一切正常，但是当我使用多个时会出现问题。

我的指示：

RelativeLayout

我的templateUrl文件：

app.directive('widget', ['widgets', function(widgets){
    return {
        restrict: 'E',
        link: function(scope, element, attrs) { 

            // Send attributes to template
            scope.widget = {
                id      : attrs.id,
                type    : attrs.type,
                view    : attrs.view
            }

        },
        templateUrl: function(elem, attrs) {
            return false || 'tpl/widgets/' + attrs.type + 's.html';
        }
    }
}])

如果我将以下代码添加到我的主HTML文件

<div ng-controller="Widgets">
    {{widget.id}}
</div>

输出结果为：

widget_1

但是当我添加2个小部件时，例如：

<widget id="widget_1" type="table" view="basic"></widget>

输出结果为：

widget_2

widget_2

由于只有一个<widget id="widget_1" type="table" view="basic" views="basic"></widget> <widget id="widget_2" type="table" view="basic" views="basic"></widget>每次被新的“小部件”覆盖。创建（我假设..）。

每次创建新窗口小部件时，有没有办法创建唯一范围/ var？

Answer 1

使用isolate scope

app.directive('widget', ['widgets', function(widgets){
    return {
        restrict: 'E',
        scope:{},
        link: function(scope, element, attrs) { 

            // Send attributes to template
            scope.widget = {
                id      : attrs.id,
                type    : attrs.type,
                view    : attrs.view
            }

        },
        templateUrl: function(elem, attrs) {
            return false || 'tpl/widgets/' + attrs.type + 's.html';
        }
    }
}])

为了更好地理解scope中directive的概念：

请参阅此链接：“http://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/”

每次调用指令时如何创建唯一的范围（AngularJS）

1 个答案: