2017-02-07 8 views
1

2つのシンプルなディレクティブをインデックスHtmlファイルに含めました。しかし、私が上に含まれているファイルは奇妙なことに動作していません。Angularディレクティブファイルをindex.htmlにインクルードすると、1つのディレクティブが実行されない

ファイルを個別に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' 
]); 

答えて

2

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

あなたは一度だけ、それを宣言することができ、その後、使用第2パラメータなしの場合

// Get the module 
var app = angular.module('app.directives'); 
関連する問題