Question

我有一个有趣的情况，我完全承认我可能没有正确处理。

我想使用AngularAMD将指令加载到Angular应用程序中，但有关指令的信息来自数据库/ API调用。这就是我现在处理的方式：

app.run(function ($rootScope, $state, $http) {
    $rootScope.$state = $state;
    $rootScope.rootPages = JSON.parse(localStorage.pages);

    $http.get('api/Directives').then(function (resp) {
        for (var i = 0; i < resp.data.length; i++) {
            var dirInfo = resp.data[i];
            var dirConfig = JSON.parse(dirInfo.Configuration);

            angularAMD.directive(dirInfo.Name, function () {
                return {
                    restrict: 'E',
                    controller: eval(dirConfig.controller),
                    templateUrl: dirConfig.templateUrl,
                    scope: true,
                }
            });
        }
    }, function (error) {
        alert('error');
    });
});

目前这会生成两个指令，并且我的页面上有两个链接，每个模块一个（使用angular-ui-router和router-ui-extras来加载基于另一个数据库表/ API调用的链接）。理论上单击链接1应该显示指令1，链接2应该显示指令2.但是，当我单击链接1时，指令2出现。这几乎就像注册的唯一指令是指令2。这是我从数据库中获得的信息：

dirInfo1: {
    Name: directiveOne,
    templateUrl: /html/directiveOne.html,
    controller: controllerOne
}

dirInfo2: {
    Name: directiveTwo,
    templateUrl: /html/directiveTwo.html,
    controller: controllerTwo
}

在这种情况下，只显示了directiveTwo.html，只有controllerTwo会触发。

非常感谢任何帮助。

Answer 1

使用具有延迟/异步操作的循环的常见问题。到第一个angularAMD.directive被解析的时刻var dirInfo = resp.data[i];在循环内部等于列表中的最后一项。

您需要在循环内部使用Promises或匿名函数来保持链接到异步函数内的正确索引。查看您的案例中发生的事情的简单示例：https://stackoverflow.com/a/13977142/405623

for ( i = 0; i < items.length; i++) {
  (function(thisItem) {
    setTimeout(function() {
     console.log(thisItem);
    }, i * 1000);
  )(items[i]);
}

如何从数据库添加新的指令信息？

1 个答案: