Question

作为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);没有定义模板。

Answer 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

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

1 个答案: