AngularJS指令访问相同的作用域对象——避免覆盖

AngularJS directives accessing the same scope object - avoid overwrite

本文关键字：对象 覆盖 作用域 指令 访问 AngularJS      更新时间：2023-09-26

我正试图将一个有角度的对象包装成一个模板，然后我应该能够通过使用指令来实例化。在这种情况下，每个指令都是一种类型的小部件。

问题来自于我正在编写的指令基于相同类型的事实，因此在实例化指令时，我在全局作用域中跟踪小部件对象。我在

这几行有一些东西
.directive('lineChart', ['$interval', '$compile', 'widgetDataService',
    return {
            restrict: 'E',
            scope: false,
            templateUrl: 'templates/lineChart.html',
            link: function(scope, elm, attrs) {
                var obj = {
                    guid: attrs['guid'],
                    datasource: undefined
                }
                scope.widgets.push(obj)
...

那么在模板中我可以输入:

...
k-data-source="widgets[{{index}}].datasource"
...

这里的想法是，指令的后续使用将导致顺序初始化模板-因此每个模板将获得其各自的索引。然而，这不起作用。如果我不止一次地使用一个指令，那么所有实例化的模板都会得到最后一个索引，这可能意味着angular会在不同的阶段分离该实例。

是否有一种方法可以使用全局对象来跟踪指令的底层对象，但仍然让它们在运行时传递不同的索引?

你可以在指令的工厂函数中定义和设置一个变量(因为它只被调用一次)，然后在链接阶段增加它:

.directive('lineChart', ['$interval', '$compile', 'widgetDataService',
  function($interval, $compile, widgetDataService) {
    var index = 0;  //initialize index
    return {
        restrict: 'E',
        scope: true,
        templateUrl: 'templates/lineChart.html',
        link: function(scope, elm, attrs) {
            var currentIndex = index++;  //increment on linking
            scope.index = currentIndex;
            var obj = {
                guid: attrs['guid'],
                datasource: undefined
            }
            scope.$parent.widgets[currentIndex] = obj;
            scope.$on('$destroy', function () {
               index--;
            });
...

在视图中:

k-data-source="$parent.widgets[{{index}}].datasource"
相关文章：