Question

我正在创建一个游戏，其中需要发生的第一件事是从外部JSON文件加载某个状态 - 我的一个指令的内容依赖于这些数据可用 - 因此，我希望延迟应用指令直到数据加载完毕。我写了以下内容：

window.addEventListener('mythdataLoaded', function (e) { 
// Don't try to create characters until mythdata has loaded
quest.directive('character', function() {
      return {
        restrict: 'A',
        scope: {
          character: '@'
        },
        controller: 'CharacterCtrl',
        templateUrl: 'partials/character.html',
        replace: true,
        link: function(scope, element) {
          $(document).on('click', '#'+scope.character, function () {
              $('#'+scope.character+'-popup').fadeToggle();
          });
        }
      };
   });
});

// Load in myth data
var myth_data;
$.getJSON("js/mythdata_playtest.json", function(json) {
   myth_data = json;
   window.dispatchEvent(new Event('mythdataLoaded'));
});

然而，似乎我的指令的链接函数永远不会运行 - 我认为这是因为angular已经执行了它的循环部分，其中指令在添加此指令时被编译/链接。是否有一些方法可以在创建后强制angular编译该指令？我google了一下，有些人建议在链接函数中添加$ compile以解决类似的问题 - 但链接函数永远不会运行，因此对于这种情况不起作用。谢谢！

Answer 1

在我看来，总是配置指令，在指令中执行JSON调用，并将逻辑附加到JSON调用的success处理程序中的元素会更好。如果我理解正确的话，这会做你想做的事。

AngularJS是一个框架，而不是一个库，所以不推荐以你提到的方式使用它。正如您所提到的，AngularJS在运行时为您做了很多事情。默认情况下，AngularJS在加载的文档上运行，然后您的$.getJSON回调到达。当AngularJS运行时，它会通过编译内容和所有内容来实现其所有的魔力。

作为旁注，在$http上使用$.getJSON时，它还有更多 Angular方式。

Answer 2

我认为你正在以错误的方式思考这个问题。角度的一个主要意识形态是你设置声明性元素并让它对范围的状态做出反应。

我认为您可能想要做的是通过指令范围传递您需要的内容，并使用其他角度内置指令隐藏或显示您的默认（“非指令”）状态，直到从控制器设置范围例如。

实施例：您希望隐藏一个框，直到api调用回来。您的指令在元素上设置特殊样式（不隐藏）。您可以传入带有默认值的范围var，并在指令模板中使用ng-show="data.ready"之类的东西来处理实际的dom内容，而不是延迟动态设置指令。

在运行时添加AngularJS指令

2 个答案: