AngularJS 自定义指令不起作用答案

【问题标题】：AngularJS Custom directive doesn't workAngularJS 自定义指令不起作用
【发布时间】：2015-11-02 21:09:24
【问题描述】：

我正在尝试让我创建的自定义指令正常工作。我创建的指令包含一个引用控制器的表。我没有在我的代码中包含 ProjectController，因为该部分有效，但是一旦我将所有内容放入自定义指令中，它就会停止工作。我相信自定义指令没有受到打击。有什么建议？

app.js

app.directive('projectInformation', function () {
    return {
        restrict: 'E',
        templateUrl: 'project-information.html',
        controller: function() {
            this.products = projects
        },
        controllerAs: 'projectCtrl'
    };
});

project-information.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（未找到）”

【问题讨论】：

你能更具体地说明什么不起作用吗？预期的行为是什么，你得到的行为是什么？
开发工具网络中是否请求模板？您没有提供有关故障排除或症状的详细信息。会发生什么？
在我的脑海中，您是否检查了控制台中的错误，可能是您的模板路径错误或可能给出提示的东西？
ng-controller 是在哪里定义的？另外，您在这里展示了两个实例，您希望这两个实例具有相同的数据还是不同的数据？
怎么不行？

标签： javascript html angularjs angularjs-directive

【解决方案1】：

尝试在项目信息视图中指定“projectCtrl”的来源或包含在其中的适当控制器：

app.directive('projectInformation', function () {
    return {
        restrict: 'E',
        templateUrl: 'project-information.html',
        controller: 'yourControllerHere'
    };
});

【讨论】：

向指令添加类确实是可能的。想象一个底层<p>tag 的css 规则。 project-information.active p{//some css}
你知道的越多 :) 谢谢安德斯，我需要调查一下！
@ifTrue 我查看了控制台，它给我的错误是 'GET localhost:58893/Dashboards/project-information.html 404 (Not Found)'
project-information.html 是否在文件夹中？如果可以，请发布您的指令的更新版本，以便我看到您的更改。
@ifTrue 刚刚更新了代码，添加到布局页面代码中，更新了指令以及我的文件路径的图片

【解决方案2】：

在您的指令中使用替换选项，您还可以添加一个“A”来限制，以便您可以将您的指令作为属性调用，希望这会有所帮助

app.directive('projectInformation', function () {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'project-information.html'
    };
});

【讨论】：

【解决方案3】：

网站运行后，您将无法使用 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'
    };
});

【讨论】：