Angular .directional templateUrl nicht angefordert

Ich lerne immer noch eckig, also möchte ich meine eigenen Steuerelemente schreiben, um mehr darüber zu lernen, wie eckig funktioniert. Ich begann mit einem Datepicker, da dies eine Kontrolle ist, die ich gelegentlich brauche und die eine Menge Funktionalität enthält, die sich nie ändert.Angular .directional templateUrl nicht angefordert

Ich habe diesen Datepicker hochgefahren, indem ich die template direkt in der Direktive deklariert habe, aber als ich die Vorlage in eine eigene HTML-Datei verschieben wollte, wurde es peinlich.

Gemäß der eckigen Dokumentation sollte es möglich sein, eine außerhalb liegende HTML-Datei für die Vorlage des Steuerelements anzugeben, also habe ich versucht, dies zu tun, als das Steuerelement mehr und mehr entwickelt wurde.

Die Richtlinie ist nun wie folgt:

angular.module('my.Controls', []) 
.directive('myDatepicker', [function() { 
    return { 
     restrict: 'AE', 
     scope: {}, 
     require: 'ngModel', 
     templateUrl: '/Templates/my/DatePicker.html', 
     link: function (scope, iElement, iAttrs, ngModelController) { 
     // Some datepicker functionality 
    } 
}]);

und natürlich eine HTML-Datei für die Richtlinie Prüfung arbeiten:

<!DOCTYPE html> 
<html ng-app="myApp"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title></title> 
    <meta charset="utf-8" /> 
    <script type="text/javascript" src="Scripts/angular/current/angular.min.js"></script> 
    <script type="text/javascript" src="Scripts/my/Controls.js"></script> 
    <script type="text/javascript"> 
     var app = angular.module('myApp', ['my.Controls']); 
     var ctrl = app.controller('myCtrl', ['$scope', function ($scope) { 
$scope.Date = new Date(2016, 08, 15); 
     }]); 

    </script> 
</head> 
<body ng-controller="myCtrl"> 
    {{Date}} 
    <my-datepicker ng-model="Date" /> 
</body> 
</html>

Jetzt kann ich bestätigen, dass die Js-Dateien werden geladen und dass die App und der Controller funktionieren. Aber seit ich die Eigenschaft template: '...' in templateUrl: '...' geändert habe, kann ich nicht einmal überprüfen, dass eckig sogar versucht, die HTML-Datei zu laden, da ich keine Anfragen sehen kann.

Was fehlt mir hier? Warum versucht eckig nicht einmal, die Vorlage von der URL zu laden?

Quelle

2016-09-15 Adwaenyth

Ist das eine gültige Datei ''my.DatePicker.html'' ?? Es scheint, es gibt einen Punkt nach "meinem" –

Es gibt keine Versuche oder nicht versuchen, die Vorlage zu erhalten. Deine URL ist falsch. – Masterakos

Sorry, Tippfehler beim Editieren einiger Infos ... es ist eigentlich ein '/', funktioniert aber immer noch nicht. – Adwaenyth

-1

Stellen Sie sicher, dass der HTML-Pfad und der Name korrekt sind. Ich bin in der Lage zu sehen, dass Ihre Vorlagen-URL einige Punkte/Templates/m y.D atePicker.html hat. Ersetzen Sie es durch einen Unterstrich (_) oder Bindestrich (-) und überprüfen Sie es.

Quelle

2016-09-15 12:26:53

Es wirkt sich wirklich nicht aus. Sie können Ihren Namen mit Punkten, gestrichelten Linien oder Unterstrichen teilen. – Reyraa

Seien Sie vorsichtig mit Ihren Skripten. Ich würde empfehlen, Ihre myApp Moduldefinition in eine Skriptdatei zu verschieben. Ich vermute, dass Sie im Moment möglicherweise Konsolenfehler haben, die verhindern, dass Ihre App ordnungsgemäß ausgeführt wird. Weil es in der Geige arbeitet.

Ich machte 3 Änderungen an Ihrem Skript zuerst ist ich nur alle in den Inline-Skriptblock zu testen (tun Sie dies nicht für prod legte sie in eine Datei). Ich entfernte dann die / von Templates/my/DatePicker.html. Ich habe die 1.5x Version von eckig angeschlossen. Sofern Sie Angular2 nicht verwenden, sollte der gesamte folgende Code gut funktionieren.

angular.module('my.Controls', []) 
    .directive('myDatepicker', [function() { 
     return { 
      restrict: 'AE', 
      scope: {}, 
      require: 'ngModel', 
      templateUrl: 'Templates/my/DatePicker.html', 
      link: function (scope, iElement, iAttrs, ngModelController) { 
      // Some datepicker functionality 
      } 
     } 
}]); 


var app = angular.module('myApp', ['my.Controls']); 
var ctrl = app.controller('myCtrl', ['$scope', function ($scope)  { 
     $scope.Date = new Date(2016, 08, 15); 
}]);

Plunkr kann here gefunden werden.

Quelle

2016-09-15 12:34:59 Nix

Angular .directional templateUrl nicht angefordert

Antwort

Verwandte Themen