1

我正在研究一个自定义指令，我将在单击选项卡时从控制器获取模板以进行编译。以下是我的模板、自定义指令和 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> ';
    }


}

我的自定义指令：

app.directive('customCharts', ['$compile', function($compile) {
    return {
        restrict: 'EA',
        scope: {
            dashboard1Data: '=',
            title1Text: '=',
            dashboard2Data: '=',
            title2Text: '=',
            template: '='
        },
        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);
            });
        }
    }

}]);

在jsp页面中我有：

<div class="customChartsDiv">

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

</div>

如果满足条件，我的自定义指令工作正常并在$scope.onTabClick功能中正确显示图表。eachTab.id == 1我怎样才能使指令通用，以便即使满足eachTab.id == 2oreachTab.id == 3条件它也能工作？

4

2 回答 2

0

也许它可以帮助

   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>'
      }


    }
于 2015-02-26T07:14:35.737 回答
-1

你将尝试在链接函数中使用 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 组合..

于 2015-02-26T06:23:56.827 回答