angularjs - 评估模板函数中的属性

Question

我想创建一个指令，该指令使用基于属性值的适当模板。如果tAttrs.datatype是input则加载一个input元素，如果是select则加载一个select元素。我有一个 tmplServer 服务来提供适当的模板。

基于 AngularJS 问题 ( https://github.com/angular/angular.js/issues/7466 )，我尝试使用 $interpolate 服务，但仍然无法正常工作!

app.directive('mdmInput', ['$compile', 'tmplServer', '$timeout', '$interpolate', '$rootScope', function($compile, tmplServer, $timeout, $interpolate, $rootScope) {
return {
    restrict: 'C',
    replace: false,
    scope: {
        value: '=',
        datatype: '@',
        finished: '&',
        valueChanged: '&',
        onDelete: '&'
    },
    template: function(tElement, tAttrs){
        return tmplServer.getTemplate($interpolate(tAttrs.datatype)(tElement.parent('.mdm-input').scope()), tAttrs);
    }
};
}]);

现在在tmplServer中:

getTemplate: function ( datatype, attrs ) {
    console.log(datatype);    // loges an empty string;
    if(datatype === 'select'){
        return selectTmpl;
    } else {
        return inputTmpl;
    }
}

在 tmplServer.getTemplate: function ( datatype, attrs ) 中，datatype 未被解析。它只是一个空字符串。

有没有办法可以评估模板函数中的属性(在元素附加到 DOM 之前)？

Answer 1

我使用 AngularJS 1.3.0-beta.13 来重现您的代码。我用以下 html 进行了测试:

<select class="mdm-input" datatype="select"></select>
<input type="text" class="mdm-input" datatype="input"/>

我得到以下日志:

   select
   SELECT
   input
   INPUT 

这是我为获得结果所做的事情:

.directive('mdmInput', ['$compile', '$timeout', '$interpolate', '$rootScope', 'tmplServer', function($compile, $timeout, $interpolate, $rootScope, tmplServer) {
return {
    restrict: 'C',
    replace: false,
    scope: {
        value: '=',
        datatype: '@',
        finished: '&',
        valueChanged: '&',
        onDelete: '&'
    },

    template: function(tElement, tAttrs){
        console.log(tAttrs.datatype);
        console.log(tElement[0].nodeName);
    }
};

了解我如何获取元素节点名称以大写的 SELECT 或 INPUT，这可以避免开发人员从自定义属性中指定数据类型(以防万一它可以简化您的用例)。

HTH