Angularjs 在Angular js中，自定义指令需要一种方法来处理具有不同模型名称的动态模板

我正在处理一个自定义指令，在单击tab进行编译时，我将从controller获取该指令的模板。以下是我的模板、自定义指令和html代码

控制器：

var template = '';
$scope.onTabClick = function(eachTab) {

    if (eachTab.id == 1) {
        template = ' <div class="innerChartsDiv">  <div class="col">  <p class="graphtitle"> {{title1Text}}</p>     <c3-simple id="dashboard1Data" config="dashboard1Data"></c3-simple>   </div> <div class="col">   <p class="graphtitle"> {{title2Text}}</p>    <c3-simple id="dashboard2Data" config="dashboard2Data"></c3-simple>   </div> </div> ';
    }

    if (eachTab.id == 2) {
        template = ' <div class="innerChartsDiv">  <div class="col">  <p class="graphtitle"> {{title6Text}}</p>     <c3-simple id="dashboard6Data" config="dashboard6Data"></c3-simple>   </div>  <div class="col">   <p class="graphtitle"> {{title10Text}}</p>    <c3-simple id="dashboard10Data" config="dashboard10Data"></c3-simple>   </div> </div> ';
    }

    if (eachTab.id == 3) {
        template = ' <div class="innerChartsDiv">  <div class="col">  <p class="graphtitle"> {{title16Text}}</p>     <c3-simple id="dashboard16Data" config="dashboard16Data"></c3-simple>   </div>  <div class="col">   <p class="graphtitle"> {{title4Text}}</p>    <c3-simple id="dashboard4Data" config="dashboard4Data"></c3-simple>   </div> </div> ';
    }


}

在jsp页面中，我有：

<div class="customChartsDiv">

    <div custom-charts dashboard1-data="dashboard1Data" title1-text="title1Text" dashboard2-data="dashboard2Data" title2-text="title2Text" template="template"></div>

</div>

---

当在

$scope中时，我的自定义指令工作正常，并正确显示图表。如果满足
eachTab.id==1
条件，请单击onTabClick

函数。如何使指令通用，以便即使满足

eachTab.id==2

或

eachTab.id==3

条件，它也能工作

U将尝试在链接函数中使用scope.apply（）

link: function(scope, element, attrs) {
            scope.$watch('templatedyn', function() {
                var parent = angular.element(document.querySelectorAll('.customChartsDiv')) // DOM element where the compiled template can be appended
                var linkFn = $compile(scope.template);
                var content = linkFn(scope);
                parent.append(content);

                scope.apply();  //add like this
            });
        }

我不确定这一点，否则在您的场景中使用ng switch和ng include组合。

可能会有所帮助

   var template = '';
    $scope.onTabClick = function(eachTab) {
    eachTab = parseInt(eachTab, 10);
        if (eachTab.id === 1) {
            template = ' <div class="innerChartsDiv">  <div class="col">  <p class="graphtitle"> {{title1Text}}</p>     <c3-simple id="dashboard1Data" config="dashboard1Data"></c3-simple>   </div> <div class="col">   <p class="graphtitle"> {{title2Text}}</p>    <c3-simple id="dashboard2Data" config="dashboard2Data"></c3-simple>   </div> </div> ';
        }

        else if (eachTab.id === 2) {
            template = ' <div class="innerChartsDiv">  <div class="col">  <p class="graphtitle"> {{title6Text}}</p>     <c3-simple id="dashboard6Data" config="dashboard6Data"></c3-simple>   </div>  <div class="col">   <p class="graphtitle"> {{title10Text}}</p>    <c3-simple id="dashboard10Data" config="dashboard10Data"></c3-simple>   </div> </div> ';
        }

        else if (eachTab.id === 3) {
            template = ' <div class="innerChartsDiv">  <div class="col">  <p class="graphtitle"> {{title16Text}}</p>     <c3-simple id="dashboard16Data" config="dashboard16Data"></c3-simple>   </div>  <div class="col">   <p class="graphtitle"> {{title4Text}}</p>    <c3-simple id="dashboard4Data" config="dashboard4Data"></c3-simple>   </div> </div> ';
        }
       else {
            template = '<div>default template</div>'
      }


    }

var模板=”；
$scope.onTabClick=函数（eachTab）{
eachTab=parseInt（eachTab，10）；
if（eachTab.id==1）{
template='
{{{title1Text}}
{{{title2Text}}
；
}
else if（eachTab.id==2）{
template='
{{{title6Text}}
{{{title10Text}}
；
}
else if（eachTab.id==3）{
template='
{{title16Text}}
{{{title4Text}}
；
}
否则{
模板='默认模板'
}
}

您的意思是，现在它只在eachTab.id==1时工作？并且在其他情况下不起作用？是否测试了eachTab.id是否带有其他值，例如2，但它不起作用？是的，当eachTab.id==2或eachTab.id==3时，我在var linkFn=$compile（scope.template）行收到未定义的错误；我不清楚你的答案。你的意思是说，如果我将scope.apply（）放入，即使eachTab.id==2或eachTab.id==3，它也会工作吗？当eachTab.id==1时，即使没有scope.apply（），它也可以正常工作。您的意思是说使用

scope.apply（）将使逻辑通用？如果条件在我的代码中完全执行，那么没有问题，所有问题都会随之而来（假设eachTab.id==3得到满足），那么模板有config=“dashboard16Data”和config=“dashboard4Data”，但在我的链接函数中，我只有dashboard1Data和dashboard2Data，然后它给出了未定义的错误。我需要对此做进一步的澄清吗？假设满足了eachTab.id==1，那么模板就有config=“dashboard1Data”和config=“dashboard2Data”，在我的链接函数中，我已经有了dashboard1Data和dashboard2Data，所以它工作得非常好。我希望我说得很清楚。你能在普朗克做吗？当然，但请看。c3指令未在此处运行，将在plunker问题解决后在此处更新。我对使用JSFiddle或Codepen不太熟悉。
   var template = '';
    $scope.onTabClick = function(eachTab) {
    eachTab = parseInt(eachTab, 10);
        if (eachTab.id === 1) {
            template = ' <div class="innerChartsDiv">  <div class="col">  <p class="graphtitle"> {{title1Text}}</p>     <c3-simple id="dashboard1Data" config="dashboard1Data"></c3-simple>   </div> <div class="col">   <p class="graphtitle"> {{title2Text}}</p>    <c3-simple id="dashboard2Data" config="dashboard2Data"></c3-simple>   </div> </div> ';
        }

        else if (eachTab.id === 2) {
            template = ' <div class="innerChartsDiv">  <div class="col">  <p class="graphtitle"> {{title6Text}}</p>     <c3-simple id="dashboard6Data" config="dashboard6Data"></c3-simple>   </div>  <div class="col">   <p class="graphtitle"> {{title10Text}}</p>    <c3-simple id="dashboard10Data" config="dashboard10Data"></c3-simple>   </div> </div> ';
        }

        else if (eachTab.id === 3) {
            template = ' <div class="innerChartsDiv">  <div class="col">  <p class="graphtitle"> {{title16Text}}</p>     <c3-simple id="dashboard16Data" config="dashboard16Data"></c3-simple>   </div>  <div class="col">   <p class="graphtitle"> {{title4Text}}</p>    <c3-simple id="dashboard4Data" config="dashboard4Data"></c3-simple>   </div> </div> ';
        }
       else {
            template = '<div>default template</div>'
      }


    }