Vorlage nicht für eine Richtlinie in einer Richtlinie angewandt bekommen

ich eine Richtlinie in einer Richtlinie hätte, die wie folgt aussieht:Vorlage nicht für eine Richtlinie in einer Richtlinie angewandt bekommen

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
<body ng-app="myApp"> 

<test-directive></test-directive> 

<script> 

var app = angular.module("myApp", []); 

app.directive("testDirective", ["$compile", function($compile) { 
    return { 
     restrict: 'AE', 
     template: '<div>just a test</div>', 
     link: function (scope, element, attrs) { 

      let autocomplete = $compile('<test-chart></test-chart>'); 
      let content = autocomplete(scope); 
      element.append(content); 
     } 
    }; 
}]); 

app.directive('testChart', function() { 
      return { 
       restrict: 'E', 
       transclude: true, 
       controllerAs: 'chartCtrl', 
       template: '<div><div id="container"></div><ng-transclude></ng-transclude></div>', 
       controller: ['$scope', '$element', '$attrs', function ChartController($scope, $element, $attrs) { 

        var hc = Highcharts.chart('container', { 

        }); 
       }] 
      }; 
     }) 
</script> 

</body> 
</html>

https://www.w3schools.com/code/tryit.asp?filename=FHYNMDW67ST5

Das Problem ist, ich habe, wenn die innere Richtlinie versucht, die highchart mit zu initialisieren:

var hc = Highcharts.chart('container', { });

Dies gibt einen highchart Fehler # 13, das ist, wenn highchart kein Element finden kann auf ein Diagramm zu erstellen. In diesem Beispiel: <div id="container">

Mit Blick auf das Dokument in der Steuerung für die innere Richtlinie scheint es, die Vorlage der Richtlinie zu fehlen. Deshalb wird highchart # 13.

Warum nicht angewendet die innere Richtlinie Vorlage zu werden?

Quelle

2017-07-27 President Camacho

Nehmen Sie einen näheren Blick auf Ihre testDirective ‚s Verknüpfungsfunktion:

let autocomplete = $compile('<test-chart></test-chart>'); 
// Your test chart is detached here and thus its controller can't find container in the DOM 
let content = autocomplete(scope); 
// This line of code is never executed because the previous one throws that's why you never see your test chart being appended to the DOM 
element.append(content);

Um dies zu beheben, dass Sie zuerst Ihre autocomplete auf das DOM anhängen müssen. Und erst dann kompilieren und verlinken. Grundsätzlich können Sie so gehen:

let content = angular.element('<test-chart></test-chart>'); 
element.append(content); 
$compile(element.contents())(scope);

Quelle

2017-07-27 17:29:40 xReeQz

Vorlage nicht für eine Richtlinie in einer Richtlinie angewandt bekommen

Antwort

Verwandte Themen