Всегда действует 1-я определенная директива, в то время как другие не являются AngularJs - PullRequest
Новая
       23

Всегда действует 1-я определенная директива, в то время как другие не являются AngularJs

0 голосов
/ 05 июля 2019

Я использую angularJs для написания простого веб-приложения и сталкиваюсь со странной проблемой, когда 1-я определенная директива всегда работает, а другие нет.

У меня определены 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>

Проблема здесь в том, что первая определяющая директива всегда будет отображаться, а две другие - нет.Если порядок изменяется, он всегда отображает первую определенную директиву в этом списке.

В чем причина и как это исправить?

1 Ответ

0 голосов
/ 05 июля 2019

Этот синтаксис, который вы используете: 

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

каждый раз создает новый модуль. Создайте модуль один раз, а затем зарегистрируйте каждую директиву следующим образом: 

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