Question

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

app.js

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

项目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页面中的表。此外，在网页的控制台日志中，它说“获取http://localhost:58893/Dashboards/project-information.html 404（未找到）＆＃39;

Answer 1

尝试指定适当的控制器，其中＆＃34; projectCtrl＆＃34;来自类似或来自项目信息视图中包含div的内容：

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

Answer 2

在您的指令中使用替换选项，您还可以添加＆＃39; A＆＃39;限制所以你可以调用你的指令作为一个属性希望这将有助于

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

Answer 3

您无权使用ng-include访问＆＃34;查看＆＃34;文件夹，其中＆＃34; project-information.html＆＃34;位于，一旦网站运行。所以你必须在＆＃34; Views＆＃34;之外创建一个文件夹。文件夹，将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'
    };
});

AngularJS Custom指令不起作用

3 个答案: