Question

我正在使用angularJs编写一个简单的Web应用程序，并且遇到一个奇怪的问题，即第一个定义的指令始终有效，而其他指令则不起作用。

我定义了3个指令（hostTableArea，hostGraphArea和hostSummeryArea），这些是这些指令的详细信息

var app = angular.module("app-directive", []);
app.directive("hostTableArea", function() {
    return {
        restrict:'E',
        scope: {
            value: '='
        },
        templateUrl : "/js/directive/host-table-area/host-table-area.html",
        link: function ($scope) {
            console.log($scope.value);
        }
    };
});

var app = angular.module("app-directive", []);
app.directive("hostGraphArea", function() {
    return {
        restrict:'E',
        scope: {
            val2: '='
        },
        templateUrl : "/js/directive/host-graph-area/host-graph-area.html",
        link: function ($scope) {
            console.log($scope.val2);
        }
    };
});

var app = angular.module("app-directive", []);
app.directive("hostSummeryArea", function() {
    return {
        restrict:'E',
        scope: {
            val3: '='
        },
        templateUrl : "/js/directive/host-summery-area/host-summery-area.html",
        link: function ($scope) {
              console.log($scope.val3);
        }
    };
});

我为每个指令都有相应的HTML文件，并且该HTML文件在templateURL位置中定义。所有指令均在 index.html 页

中使用

<div class="tab-content area-content">
    <div class="tab-pane" id="tableView" >
        <host-table-area data-value="'text-1'"></host-table-area>
    </div>
        <div class="tab-pane active" id="graphView">
        <host-graph-area data-val2="'text-2'"></host-graph-area>
    </div>
    <div class="tab-pane active" id="summaryView">
        <host-summery-area val3="'text-3'"></host-summery-area>
    </div>
</div>

所有3条指令均按以下顺序在index.html页面上定义

<script src="/js/directive/host-summery-area/host-summery-area.js"></script>
<script src="/js/directive/host-graph-area/host-graph-area.js"></script>
<script src="/js/directive/host-table-area/host-table-area.js"></script>

这里的问题是，第一个定义指令将始终显示，而其他两个则不显示。如果更改顺序，它将始终在此列表中显示第一个已定义的指令。

原因和解决方法是什么？

Answer 1

您使用的这种语法：

var app = angular.module("app-directive", []);

每次创建一个新模块。一次创建模块，然后注册每个指令，如下所示：

angular.module("app-directive").directive("hostTableArea", function() {};

总是第一个定义的指令在起作用，而其他指令不是AngularJs

1 个答案: