AngularJS

Question

在我的控制器中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 属性的有效对象。但是，它不识别它。我尝试通过在控制器 HTML 中传入 countdata="Deposit" 来简化事情。我还将 attrs.countdata.type 更改为 attrs.countdata 并且它的计算结果为字符串。

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

我看过 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>"
    }
}

AngularJS - 将对象传递到属性时动态加载 templateURL

AngularJS - dynamically load templateURL when passing object into attribute

javascript

angularjs-directive

angularjs-controller

angular-template