Question

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

我通过直接在指令中声明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文件，因为我看不到任何请求。

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

Answer 1

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

我首先对您的脚本进行了3次更改，我只是将它们全部放在内联脚本块中进行测试（不要将它们用于将它们放入文件中）。然后，我从/移除了Templates/my/DatePicker.html。我连接了1.5x版本的角度。除非您使用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。

Answer 2

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

Angular .directive templateUrl未被请求

2 个答案: