未请求Angular .directive templateUrl
我还在学习angular，所以我想编写自己的控件来了解更多关于angular的工作原理。我从一个datepicker开始，因为它是我偶尔需要的一个控件，它嵌入了很多永远不会改变的功能。
我通过直接在指令中声明template来启动和运行datepicker，但是当我想将模板重新定位到它自己的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加载模板？
回答 2
Stack Overflow用户
发布于 2016-09-15 20:35:00
小心你的脚本。我建议将您的myApp模块定义移动到脚本文件中。我预计你现在可能会有控制台错误，这些错误会阻碍你的应用程序正常运行。因为它在小提琴里工作。
我首先对你的脚本做了3处修改，我只是把它们都放在内联脚本块中进行测试(不要这样做，把它们放在一个文件中)。然后，我从Templates/my/DatePicker.html中删除了/。我连接了angular的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上找到。
Stack Overflow用户
发布于 2016-09-15 20:26:54
确保存在正确的html路径和名称。我可以看到你的模板网址有一些点/Templates/my.DatePicker.html.替换为下划线(_)或连字符(-)并检查。
https://stackoverflow.com/questions/39510921
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号