AngularJS 自定义指令不起作用
Mar*_*kus 5 html javascript angularjs angularjs-directive
我正在尝试使我创建的自定义指令起作用。我创建的指令包含一个表，它引用一个控制器。我没有在我的代码中包含 ProjectController 因为那部分可以工作，但是一旦我将所有内容都放入自定义指令中，它就停止工作了。我相信自定义指令没有受到影响。有什么建议？
应用程序.js
app.directive('projectInformation', function () {
return {
restrict: 'E',
templateUrl: 'project-information.html',
controller: function() {
this.products = projects
},
controllerAs: 'projectCtrl'
};
});
项目信息.html
<table class="table table-striped">
<thead>
<!--TABLE HEAD-->
<tr>
<th>#</th>
<th>Project </th>
<th>Name </th>
<th>Phone </th>
<th>Company </th>
<th>Date</th>
</tr>
</thead>
<tbody>
<!--TABLE BODY-->
<!--Angular; Repeats all of the content in the dTIMS project array-->
<tr ng-repeat="product in projectCtrl.products">
<td>{{ product.id }}</td>
<td>{{ product.name }}</td>
<td>{{ product.supervisor }}</td>
<td>{{ product.phone }}</td>
<td>{{ product.company }}</td>
<td>{{ product.date }}</td>
</tr>
</tbody>
ReviewAndAdjust.cshtml
<div class="col-lg-6">
<!--GRAD CONTENT-->
<!--first instance-->
<project-information class="table-responsive"></project-information>
</div>
<div class="content" id="elementGrid"><!--GRAD CONTENT-->
<!--second instance-->
<project-information class="active content table-responsive"></project-information>
</div>
LayoutPage.cshtml
<html ng-app="dTIMSApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="~/Scripts/app.js"></script>
</head>
<body><!--ng-controller="ProjectController as projectCtrl" used to be in body tag-->
</body>
</html>
我还尝试使用自定义元素指令的其他替代方法。我尝试了一个自定义属性指令并使用了 ng-include 指令，但 div 仍然不会被 html 页面中的表格填充。同样在网页的控制台日志中，它显示“GET http://localhost:58893/Dashboards/project-information.html 404 (Not Found)”
网站运行后，您将无法使用 ng-include 访问“project-information.html”所在的“View”文件夹。因此，您必须在“Views”文件夹之外创建一个文件夹，将 project-information.html 页面放入该文件夹中，并让 ng-include 具有新路径。代码看起来像这样：
app.directive('projectInformation', function () {
return {
restrict: 'E',
templateUrl: '/Scripts/includes/project-information.html',
controller: function () {
this.products = projects
},
controllerAs: 'projectCtrl'
};
});
| 归档时间： |
|
| 查看次数： |
7650 次 |
| 最近记录： |