Включение файлов с угловыми директивами в index.html предотвращает запуск одной директивы

Question

Я включил две простые директивы в свой индексный HTML-файл. Но странно, что файл, который я включил выше, не работает.

Если я добавляю файлы в index.html отдельно, каждый файл работает хорошо.

Мой индекс Html файл:

<script src="app/directives/spinnerHide.js" type="text/javascript"></script> 
<script src="app/directives/moreInformation.js" type="text/javascript"> </script> 

В вышеописанном случае, spinnerHide не работает.

Мои директивы:

(function() { 
    'use strict'; 
    var app = angular.module('app.directives', []); 
    app.directive('spHide', spHide); 

    function spHide($rootScope) { 
     var directive = { 
      restrict: 'A', 
      link: linker 
     }; 
     return directive; 

     function linker($scope, elm, attrs) { 
      $scope.$watch(function() { 
       return $rootScope.spinnerActive; 
      }, function() { 
       if ($rootScope.spinnerActive) { 
        elm.removeClass('ng-hide'); 
       } 
       else { 
        elm.addClass('ng-hide'); 
       } 
      }, true); 
     } 
     } 
    })(); 


(function() { 
    'use strict'; 
    var app = angular.module('app.directives', []); 
    app.directive('moreInformation', moreInformation); 

    moreInformation.$inject = []; 

    function moreInformation() { 
     var directive = { 
      restrict: 'A', 
      link: linker 
     }; 
     return directive; 

     function linker($scope, elm, attrs) { 

      $(elm).click(function() { 
       var contentObj = $(elm).parents().eq(2).children().eq(1); 
       var classNameArr = contentObj.attr('class').split(' '); 
       angular.forEach(classNameArr, function (value) { 
        if (value === 'ng-hide') { 
         contentObj.removeClass('ng-hide'); 
         contentObj.slideDown(); 
         $(elm).children().removeClass('fa fa-chevron-down'); 
         $(elm).children().addClass('fa fa-chevron-up'); 
        } 
        else { 
         contentObj.slideUp(); 
         contentObj.addClass('ng-hide'); 
         $(elm).children().removeClass('fa fa-chevron-up'); 
         $(elm).children().addClass('fa fa-chevron-down'); 
        } 
       }); 
      }); 
     } 
    } 
})(); 

Мой app.js файл:

angular.module('app', [ 
    'ui.router', 
    'ui.bootstrap', 
    'ngStorage', 
    'app.auth', 
    'angular-confirm', 
    'angular-spinkit', 
    'datatables', 
    'toastr', 
    'app.directives' 
]); 

Answer 1

Вы объявляете модуль дважды:

// Passing a second parameter is declaring the module 
var app = angular.module('app.directives', []); 

Вы можете объявить только один раз, а затем использовать без второго параметра

// Get the module 
var app = angular.module('app.directives');