基于指令中的属性设置templateUrl

Question

我正在研究一组角度指令,我想根据属性的存在或值加载正确的模板.

<my-form horizontal> </my-form>
<my-form vertical> </my-form>

如果是水平的,则templateUrl应该是/partials/horizontal-form和如果是vertical,则应该是templateUrl/partials/vertical-form

我对templateUrl感兴趣,因为我不能使用,template因为html取决于属性.在该compile.pre函数中,html已经加载.

如果还有另一种方法可以达到这个目的,我会对它开放,因为我现在开始使用棱角分析,信息越多越好.

谢谢

Answer 1

这个现在正确地固定在角1.1.4

你可以将一个函数传递给templateUrl.输入参数是元素,属性.并返回一个字符串(您要使用的templateUrl)

docs http://code.angularjs.org/1.1.4/docs/guide/directive

Answer 2

其中一个解决方案是在模板文件中使用ng-include.

模板文件中的第一个属性将具有以下内容:

<div ng-include = "getTemplate()">

</div>

在您的指令代码中,您将编写如下内容:

scope : {direction : "="},
link : function(scope,element,attrs)
{
    scope.getTemplate = function(){
        if(scope.direction === "horizontal")
        {
            return "horizontal.html";
        }
        return "vertical.html";
    }
}

希望这可以帮助!