データベースから新しいディレクティブ情報を追加するにはどうすればよいですか？

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

現時点では、角-UI-ルータとルータ-UIを使用して、この2つのディレクティブを生成し、私は自分のページ上の2つのリンクを持って、各モジュールに1つ（ -extrasは、別のデータベーステーブル/ API呼び出しに基づいてそれらをロードします）。理論的にリンク1をクリックするとディレクティブ1が表示され、リンク2でディレクティブ2が表示されます。ただし、リンク1をクリックするとディレクティブ2が表示されます。この場合

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

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

は、唯一directiveTwo.htmlが示され、そして唯一のcontrollerTwo火災：それは登録のみディレクティブはディレクティブであれば2 はここで私は、データベースから取得した情報ですほとんどのようです。

ご協力いただければ幸いです。

Answer 1

遅延/非同期操作のforループを使用することは、通常の問題です。 最初に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]); 
}