gpt4 book ai didi

javascript - AngularJS 指令访问同一范围对象 - 避免覆盖

转载 作者:行者123 更新时间:2023-12-03 12:02:56 25 4
gpt4 key购买 nike

我正在尝试将一个 Angular 对象包装到一个模板中,然后我应该能够使用指令实例化该模板。在这种情况下,每个指令都是一种小部件。

问题来自于这样一个事实:我正在编写的指令基于相同的类型,因此在实例化指令时,我会在全局范围内跟踪小部件对象。我有一些东西:

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

在 View 中:

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

关于javascript - AngularJS 指令访问同一范围对象 - 避免覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25326139/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com