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'
]);