0

作为 angularjs 指令的初学者，我有点困惑。任何人都可以在下面帮助我。以下是我的自定义指令。

app.directive('customCharts', ['$compile', function($compile) {
    return {
        restrict: 'EA',
        scope: {
            dashboard1Data: '=',
            title1Text: '=',
            dashboard2Data: '=',
            title2Text: '=',
        },
        link: function(scope, element, attrs) {
            var template = '<div class="col1"> <p class="graphtitle"> {{title1Text}}</p>  <c3-simple id="dashboard1Data" config="dashboard1Data"></c3-simple> </div>' + ' <div class="col2"> <p class="graphtitle"> {{title2Text}}</p>  <c3-simple id="dashboard2Data" config="dashboard2Data"></c3-simple> </div> ';

            var parent = angular.element(document.querySelectorAll('.customChartsDiv')) // DOM element where the compiled template can be appended
            var linkFn = $compile(template);
            var content = linkFn(scope);
            parent.append(content);   
         }
    }
 }]);

我希望我的模板为template = templateFromController. 即，我不想在指令中硬编码我的模板。相反，我想在 ng-init 函数调用期间在控制器中形成模板，并且我希望我的指令使用该模板。我该怎么做？

所以在我的控制器中，我会有类似的东西，

var templateFromController = '<div class="col1"> <p class="graphtitle"> {{title1Text}}</p>  <c3-simple id="dashboard1Data" config="dashboard1Data"></c3-simple> </div>'
             +' <div class="col2"> <p class="graphtitle"> {{title2Text}}</p>  <c3-simple id="dashboard2Data" config="dashboard2Data"></c3-simple> </div> '       
             +  '<div class="col1"> <p class="graphtitle"> {{title3Text}}</p>  <c3-simple id="dashboard3Data" config="dashboard3Data"></c3-simple> </div>'
             +' <div class="col2"> <p class="graphtitle"> {{title3Text}}</p>  <c3-simple id="dashboard4Data" config="dashboard4Data"></c3-simple> </div> ';

或者

var templateFromController = '<div class="col1"> <p class="graphtitle"> {{title1Text}}</p>  <c3-simple id="dashboard1Data" config="dashboard1Data"></c3-simple> </div>'
         +' <div class="col2"> <p class="graphtitle"> {{title2Text}}</p>  <c3-simple id="dashboard2Data" config="dashboard2Data"></c3-simple> </div> ';

像这样，基于我的控制器的 ng-init 函数调用中的一些其他标准，我将形成我的var templateFromController，并且我希望我的自定义指令将此 templateFromController 用于其模板。任何人都可以帮我做吗？

@Daniel，我根据您的建议进行了以下更改：

app.directive('customCharts', ['$compile', function($compile) {
    return {
        restrict: 'EA',
        scope: {
            dashboard1Data: '=',
            title1Text: '=',
            dashboard2Data: '=',
            title2Text: '=',
            template: '='
        },
        link: function(scope, element, attrs) {
            var parent = angular.element(document.querySelectorAll('.customChartsDiv')) // DOM element where the compiled template can be appended
            var linkFn = $compile(template);
            var content = linkFn(scope);
            parent.append(content);
        }
    }

}]);

在控制器中：

var template = '<div> </div>';    
$scope.init = function() {  
    template = '<div class="col1"> <p class="graphtitle"> {{title1Text}}</p>  <c3-simple id="dashboard1Data" config="dashboard1Data"></c3-simple> </div>';
    }

在我的jsp中，我有：

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

但它给出了错误：模板未在var linkFn = $compile(template);我的指令行定义。

4

1 回答 1

1

您可以将其定义为指令的属性，然后传入对象/字符串（在您的控制器中创建）。

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

这是一个 plnkr，表明这应该可以工作：http ://embed.plnkr.co/O6gNn1b6C7xJ3y2jJC05/preview

于 2015-02-25T06:24:11.567 回答