Угловой .directive templateUrl не запрашивается

Я все еще учусь угловатым, поэтому я хочу написать свои собственные элементы управления, чтобы узнать больше о том, как угловые работы. Я начал с datepicker, так как это контроль, который мне иногда нужен, и который имеет множество встроенных функций, которые никогда не меняются.Угловой .directive templateUrl не запрашивается

Я получил этот дампикер, объявив template непосредственно в директиве, но когда я захотел переместить шаблон в свой собственный HTML-файл, он начал становиться неудобным.

В соответствии с угловой документацией должно быть возможно указать внешний HTML-файл для шаблона элемента управления, поэтому я попытался сделать это, поскольку элемент управления стал все более развитым.

директива в настоящее время выглядит следующим образом:

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 
    } 
}]);

и конечно HTML-файл для тестирования директивы для работы:

<!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>

Теперь я могу подтвердить, что .js файлы загружаются и что приложение и контроллер работают. Однако, поскольку я изменил свойство template: '...' на templateUrl: '...', я даже не могу проверить, что угловой даже пытается загрузить файл HTML, поскольку я не вижу никаких запросов, сделанных для него.

Что мне здесь не хватает? Почему угловой даже не пытается загрузить шаблон из URL?

источник

2016-09-15 Adwaenyth

Действительно ли это файл '' my.DatePicker.html'' ?? Кажется, есть точка после «моего» –

Не пытайтесь или не пытаетесь получить шаблон. Ваш адрес неправильный. – Masterakos

Извините, опечатка при редактировании некоторой информации ... это на самом деле '/', но все равно не работает. – Adwaenyth

-1

Убедитесь, что существует путь и имя html. Я могу видеть, что ваш URL-адрес шаблона имеет некоторые точки/Шаблоны/m y.D atePicker.html. Заменить с помощью подчеркивания (_) или дефиса (-) и проверить.

источник

2016-09-15 12:26:53

действительно не влияет. вы можете разделить имя, используя точки, пунктирные или подчеркивающие. – Reyraa

Будьте осторожны с вашими сценариями. Я бы рекомендовал переместить определение модуля myApp в файл сценария. Я ожидаю, что у вас могут быть консольные ошибки прямо сейчас, которые препятствуют правильному запуску вашего приложения. Потому что он работает в скрипке.

Я сделал 3 изменения в вашем скрипте, прежде всего, я просто поместил их все в встроенный блок сценариев для проверки (не делайте этого, чтобы prod помещал их в файл). Затем я удалил / с Templates/my/DatePicker.html. Я подключил 1,5-кратную версию углового. Если вы не используете Angular2, все приведенные ниже коды должны работать нормально.

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 можно найти here.

источник

2016-09-15 12:34:59 Nix

Угловой .directive templateUrl не запрашивается

ответ

Смежные вопросы