始终第一个定义的指令有效，而其他指令无效 AngularJs

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", []);

每个 time.Create 模块创建一个新模块，然后像这样注册每个指令：

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

始终第一个定义的指令有效，而其他指令无效 AngularJs

Always the 1st defined directive is working while others are not AngularJs

angularjs

angularjs-directive