javascript - AngularJS - 将对象传递给属性时动态加载模板URL

Question

在我的 Controller HTML 中，我将一个对象传递到一个指令中:

<div cr-count-summary countdata="vm.currentCountData"></div>

vm.currentCountData 是一个从工厂返回的对象

我的指令代码如下:

function countSummary() {
    var directive = {
        scope: {        
            countData: '='
        },
        link: link,
        templateUrl: function(element, attrs) {
            if (attrs.countdata.type === 'Deposit') {
                return 'app/count/countsummary/countDeposit.html';
            } else {
                return 'app/count/countsummary/countRegisterSafe.html';
            }
        }
    }
}

我已经验证 vm.currentCountData 是一个有效的对象，上面有 .type 属性。但是，它不识别它。我尝试通过在 Controller HTML 中传入 countdata="Deposit" 来简化事情。我还将 attrs.countdata.type 更改为 attrs.countdata 并且它的计算结果为字符串。

当我按照上面所示设置它时，指令 templateUrl 函数似乎先于 Controller 求值

我看过this , 但它似乎只评估字符串

我需要做什么才能让 attrs 识别对象？

Answer 1

这是不可能的，因为在评估 templateUrl 函数时，angular 没有任何作用域变量，作用域是在指令的编译函数生成 preLink< 之后创建的 & postLink.

我希望您在指令模板中使用 ng-include 指令，然后根据条件在其中加载所需的模板。

标记

<div cr-count-summary count-data="vm.currentCountData"></div>

指令

function countSummary() {
    var directive = {
        scope: {        
            countData: '='
        },
        link: link,
        template: "<div ng-include=\"countdata.type === 'Deposit' ? "+
                     "'app/count/countsummary/countDeposit.html' :" + 
                    "'app/count/countsummary/countRegisterSafe.html'\">"+
                  "</div>"
    }
}