需要从控制器的ng-init函数调用获取模板以获取Angularjs中的自定义指令

debugcn 发表于 Dev

Madasu K

作为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函数调用中的其他条件，我将形成my 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);我的指令行中定义。

丹尼尔·斯明克（Daniel Smink）

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。