Angularjs和自定义指令包括其他指令

时间:2014-03-14 16:29:09

标签: angularjs angularjs-directive angular-ui-bootstrap

我想创建一个使用ui.bootstrap.tabs的自定义指令。例如,我的模板将是

<tabset>
<tab ng-repeat="language in languages" active="$first">
    <tab-heading>
        <img ng-src="language.icon.thumbnail">
    </tab-heading>
    <input ui-if="!multiline" type="text" ng-model="model[language.id].value">
    <div ui-if="multiline">
        <textarea style="width:500px; height:300px;" type="text" 
                  ui-tinymce ng-model="model[language.id].value">
        </textarea>
    </div>
</tab>
</tabset>

指令是:

function() {
        return {
            transclude: true,
            restrict : 'C',
            replace : true,
            scope : { label: '@', id: '@', multiline: '@', model: '=', languages: '=' },
            templateUrl: '/components/multilang-text/template.html'
        };

但它不起作用!我有error

我认为问题在于每个指令都使用模板......

你能帮助我吗?

THX!

1 个答案:

答案 0 :(得分:1)

你的问题很可能是替换;尝试将其设置为false /将其删除。或者,将模板HTML包装在容器中 - 例如一个<div>。原因大致是指令和<tabset>都声明了应用指令的元素。

此外,您的模板中没有换算;你真的需要transclude: true吗?