我收到此错误：[$ compile：multidir]多个指令[otherProgressbar，otherProgressbar（module：toms-standalone）]要求新/隔离
我正在尝试将指令包装在指令
中这是我的代码：
declare var otherProgressBar: Function;
class MyProgressBar implements ng.IDirective {
public scope: any = {
myTitle: '=',
myOnCancel : "&",
myOnClose: "&"
};
public template: string = "<other-progressbar title='myTitle' action-on-close='myOnClose' action-on-cancel='myOnCancel' />";
public restrict: string = "E";
public static factory(): ng.IDirectiveFactory {
const directive: ng.IDirectiveFactory = () => new MyProgressBar();
return directive;
};
}
angular.module("my")
.directive("myProgressBar", MyProgressBar.factory())
.directive('otherProgressbar', [otherProgressBar]);
otherProgrssion栏包含一个控制器和一个范围，但我无法以任何方式更改它
我只需在我的index.html中调用我的进度条
`<div>
<my-progress-bar title="my title" my-on-close="actionOnClose()"/>
</div>`
这是我的otherProgressBar
otherProgressBar = function() {
return {
restrict: 'E',
template: '<div class="otherProgressBar"> ' +
'<script type="text/ng-template" id="confirmModal.html">' +
' <div class="modal-header">' +
' <span class=\'modal-title \'>{{title}}</span>' +
' </div>' +
' <div class="modal-body">{{confirmationMessage | translate}}</div>' +
' <div class="footer">' +
' <button class="btn btn-primary" type="button" ng-click="ok()">{{"CMN_YES" | translate}}</button>' +
' <button class="btn btn-warning" type="button" ng-click="cancel()">{{"CMN_NO" | translate}}</button>' +
' </div>' +
'</script>' +
'<script type="text/ng-template" id="progressBarModal.html">' +
' <div class="modal-header">' +
' <span class=\'modal-title \'>{{title}}</span>' +
' </div>' +
' <div class="modal-body">' +
' <div class=\'time-label\' ng-show=\'estimatedTime\'>{{"PROGRESS_BAR.TEMPS_ESTIME" | translate}} : {{estimatedTimeLabel}}</div>' +
' <timer class=\'time-label\' interval="1000" language="fr">{{"PROGRESS_BAR.TEMPS_ECOULE" | translate}} : {{minuteUnit}}</timer> ' +
' <uib-progressbar value="percentage" type="{{styleType}}" class=\'progress-striped active\'>{{percentage}}%</uib-progressbar> ' +
' <div class=\'text-center\' ng-bind-html=\'htmlMessage\'></label></div>' +
' </div>' +
' <div class="footer">' +
' <button class="btn btn-primary" ng-show="isCloseButtonDisplayed" type="button" ng-click="close()">{{"PROGRESS_BAR.FERMER" | translate}}</button>' +
' <button class="btn btn-warning" ng-show="!isCloseButtonDisplayed" ng-disabled="isCancelButtonDisabled" type="button" ng-click="cancel()">{{"PROGRESS_BAR.ANNULER" | translate}}</button>' +
' </div>' +
'</script>' +
'</div>',
scope: {
// Titre de la popin
title: '=',
// Indication sur le fait que le traitement peut être interrompu avant la fin du traitement
isStoppable: '=',
// Indication sur le fait que la fenêtre est modale ou non
isModal: '=',
// Pourcentage d’avancement à afficher
percentage: '=',
// Temps estimé pour le traitement complet
estimatedTime: '=',
// Message à afficher sous l’indicateur de progression correspondant :
// - à l’action en cours pendant la progression
// - Un message d’erreur ou de fin à la fin de la progression
message: "=",
// Message à afficher lorsqu'une demande de confirmation est lancée
confirmationMessage: "=",
// Indication sur le fait que le traitement est en erreur
error:"=",
// Service à appeler lors du clic sur le bouton Fermer
actionOnClose: "&",
// Service à appeler lors du clic sur le bouton Annuler
actionOnCancel: "&"
},
controller: ['$scope', '$uibModal', '$sce', function($scope, $uibModal, $sce) {
$scope.init = init;
$scope.init();
/**
* Initialisation avec lancement d'une popup contenant la barre de progression.
**/
function init() {
// Style de la barre de progression par défaut
$scope.styleType = 'fwk-info';
// Est ce que le bouton Annuler est désactivé. Si le traitement n'est pas arrêtable, le bouton annuler est désactivé
$scope.isCancelButtonDisabled = (!$scope.isStoppable || $scope.isModal) ? true : false;
// Est ce que le bouton Fermer est affiché. Il n'est pas affiché lorsque le traitement est en cours (c'est le bouton annuler qui est affiché)
$scope.isCloseButtonDisplayed = false;
// Si le traitement est stoppable, on ouvre la popup avec la barre de progression, sinon on demande une confirmation à l'utilisateur
if ($scope.isStoppable) {
// Déclenchement de l'ouverture de la popup contenant la barre de progression
openProgressBarModal();
} else {
// Déclenchement de l'ouverture de la popup contenant la barre de progression
openConfirmModal();
}
}
// Mise à jour du label du temps estimé
$scope.$watch('estimatedTime', function () {
$scope.estimatedTimeLabel = secondsToHms($scope.estimatedTime);
});
// Mise à jour de la bar de progression en fonction du pourcentage
$scope.$watch('percentage', function () {
// Lorsque le traitement est terminé, on change le style, on arrête le temps écoulé et on cache le bouton annuler
if ($scope.percentage >= 100) {
$scope.styleType = 'fwk-success';
$scope.$broadcast('timer-stop');
$scope.isCloseButtonDisplayed = true;
}
});
// Arrêt du traitement si une erreur est détectée
$scope.$watch('error', function () {
if ($scope.error) {
$scope.styleType = 'fwk-error';
$scope.$broadcast('timer-stop');
$scope.isCloseButtonDisplayed = true;
}
});
// Permet d'utiliser l'html de l'attribut message
$scope.$watch('message', function () {
$scope.htmlMessage = $sce.trustAsHtml($scope.message);
});
// Ouverture d'une popup de confirmation
function openConfirmModal() {
$uibModal.open({
templateUrl: 'confirmModal.html',
size: 'sm',
scope : $scope,
// Empêche la fermeture de la modal sur click en dehors de la modale
backdrop: 'static',
controller: ['$scope', '$uibModalInstance', function ($scope, $uibModalInstance) {
$scope.ok = function () {
$uibModalInstance.close();
};
$scope.cancel = function () {
$scope.actionOnClose();
$uibModalInstance.dismiss('close');
};
}]
}).result.then(function() {
// Déclenchement de l'ouverture de la popup contenant la barre de progression
openProgressBarModal();
});
}
// Ouverture d'une popup contenant la barre de progression
function openProgressBarModal() {
$uibModal.open({
templateUrl: 'progressBarModal.html',
size: 'sm',
// Autorise ou non les actions en dehors de la modal
windowTopClass : !$scope.isModal ? 'not-modal' : '',
backdrop: !$scope.isModal ? false : 'static',
// Permet de rendre la modal déplaçable
windowClass:'movable-modal',
scope : $scope,
controller: ['$scope', '$uibModalInstance', function ($scope, $uibModalInstance) {
$scope.cancel = function () {
$scope.actionOnCancel();
$uibModalInstance.dismiss('cancel');
};
$scope.close = function () {
$scope.actionOnClose();
$uibModalInstance.dismiss('close');
};
}]
}).rendered.then(function() {
$('.movable-modal').draggable({
handle:".modal-header"
});
});
}
function secondsToHms(d) {
d = Number(d);
var h = Math.floor(d / 3600);
var m = Math.floor(d % 3600 / 60);
var s = Math.floor(d % 3600 % 60);
var hDisplay = h > 0 ? h + (h == 1 ? " heure, " : " heures, ") : "";
var mDisplay = m > 0 ? m + (m == 1 ? " minute, " : " minutes, ") : "";
var sDisplay = s > 0 ? s + (s == 1 ? " seconde" : " secondes") : "";
return hDisplay + mDisplay + sDisplay;
}
}]
};
};
有人可以解释我的错误吗？
感谢。