总是第一个定义的指令在工作，而其他的不是 AngularJs答案

【问题标题】：Always the 1st defined directive is working while others are not AngularJs总是第一个定义的指令在工作，而其他的不是 AngularJs
【发布时间】：2023-04-05 14:06:01
【问题描述】：

我正在使用 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>

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

这是什么原因以及如何解决这个问题？

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

你使用的这个语法：

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

每次创建一个新模块。创建一次模块，然后像这样注册每个指令：

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

【讨论】：