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 をテンプレートに使用するようにします。誰でも私がそれを行うのを手伝ってもらえますか?

@ダニエル、あなたの提案に従って次の変更を加えました：

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 は次のとおりです。

于 2015-02-25T06:24:11.567 に答える