AngularJS:templateUrl推迟构造控制器,依赖代码中断

Question

所以我刚刚开始使用AngularJS,到目前为止它似乎完全没问题,除了一点点障碍.假设我有两个指令,其中一个需要另一个指令,如下所示:

angular.module('components', [])
    .directive('outer', function() {
        return {
            restrict: 'E',
            replace: true,
            transclude: true,
            scope: {},
            link: function(scope) { ... },
            controller: function($scope) { ... },
            templateUrl: 'outer.html' // Note this
        };
    })
    .directive('inner', function() {
        return {
            require: '^outer', // And this
            restrict: 'E',
            ...
            link: function(scope, element, attrs, outerCtrl) { ... },
            templateUrl: 'inner.html'
        };
    });

在HTML中使用的东西是这样的:

<outer>
    <inner></inner>
</outer>

如果outer.html之前加载inner.html,则根本没有问题. <outer>正确转换并分配一个范围和一个控制器,并<inner>接收该控制器就好了.

但是,如果模板以相反的顺序加载,<inner>则在<outer>创建控制器之前链接,并且它失败并显示错误消息"错误:无控制器:外部".

我已经尝试将服务器端加载延迟附加到inner.html,并且只要outer.html首先加载,就不会出现任何问题.类似地,如果我内联outer的模板(即使用template而不是templateUrl),该模板首先可用,并且它都可以很好地工作.

有没有人知道templateUrl在其他指令所需的指令上使用的方法？在我的实际代码中,内部指令可以访问外部控制器是至关重要的,我宁愿选择templateUrl,template因为前者将布局与行为分开,并且即使行为代码增长后也更容易配置模板大.

在此先感谢,如果之前已经提出过这个问题,那就很抱歉 我在Stack Overflow上找不到任何等效的问题.

Answer 1

当您在同一模块中定义多个指令时，您可以分配一个优先级来处理指令的执行顺序。在你的情况下，优先考虑“外部”而不是内部。因此，无论模板何时加载，指令都会按顺序执行。

请参阅指令中的“指令定义对象”以获取更多说明。

我希望能得到答案。

然而，当你说“外部”控制器依赖于“内部”控制器时，它看起来不太好。我个人认为，一个控制器不应该与另一个控制器捆绑在一起。我不确定您的用例，但应该有一种方法可以打破两个控制器之间的依赖关系。