將Angular指令文件包含到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');