未请求 Angular .directive templateUrl答案

【问题标题】：Angular .directive templateUrl not being requested未请求 Angular .directive templateUrl
【发布时间】：2016-09-15 20:43:06
【问题描述】：

我还在学习 Angular，所以我想编写自己的控件来了解有关 Angular 工作原理的更多信息。我从一个日期选择器开始，因为这是我偶尔需要的一个控件，并且它嵌入了很多永远不会改变的功能。

我通过在指令中直接声明 template 来启动并运行该日期选择器，但是当我想将模板重新定位到它自己的 HTML 文件时，它开始变得很尴尬。

根据 Angular 文档，应该可以为控件的模板指定一个外部 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: '...'，我什至无法验证 Angular 是否会尝试加载 HTML 文件，因为我看不到对其提出的任何请求。

我在这里缺少什么？为什么 Angular 甚至不尝试从 URL 加载模板？

【问题讨论】：

这是一个有效的文件'my.DatePicker.html' ??似乎“我的”后面有一个点
没有尝试或不尝试获取模板。你的网址是错误的。
抱歉，编辑部分信息时打错了...实际上是/，但仍然无效。
将你的元素改为<my-datepicker></my-datepicker>（非自闭）
尝试删除路径开头的/：templateUrl: 'Templates/my/DatePicker.html'

标签： javascript angularjs angular-directive

【解决方案1】：

小心你的脚本。我建议将您的 myApp 模块定义移动到脚本文件中。我希望您现在可能会遇到控制台错误，这些错误会阻止您的应用程序正常运行。因为它在小提琴中工作。

我首先对您的脚本进行了 3 处更改，我只是将它们全部放在内联脚本块中进行测试（不要这样做，因为 prod 将它们放在文件中）。然后我从 Templates/my/DatePicker.html 中删除了/ 。我连接了 1.5x 版本的 angular。除非您使用的是 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 找到。

【讨论】：

【解决方案2】：

确保有 html 路径并且名称正确。我可以看到您的模板 URL 有一些点 /Templates/my.DatePicker.html。替换为下划线（_）或连字符（-）并检查。

【讨论】：

真的不影响。您可以使用点、虚线或下划线来划分您的姓名。