angular-ui bootstrap $modal de service à l'aide de la directive au lieu

Le problème est que $modalInstance ne peut être injecté dans le contrôleur que vous fournissez à $modal.open.
Vérifiez les sources ici:

$modal.open = function (modalOptions) {
    ...
    var modalInstance = {
        ...
    };
    ...
    if (modalOptions.controller) {
        ...
        ctrlLocals.$modalInstance = modalInstance;
        ...
        ctrlInstance = $controller(modalOptions.controller, ctrlLocals);
        ...
    }
    ...
}

En essence lorsque vous essayez d'ajouter $modalInstance comme une dépendance à votre contrôleur AngularJS regarde pour un fournisseur mondial nommé $modalInstanceProvider. Maintenant, le problème est, si vous avez compris le code ci-dessus, que $modalInstance est pas a enregistré globalement fournisseur. Il ne "existe" en tant que dépendance pour le contrôleur de passer $modal.open.

Si vous lisez le reste du code, vous remarquerez que $modal.open retourne modalInstance, peut-être que vous pouvez l'utiliser.

Quelque chose comme cette:

function SomeController($modal) {
    $scope.modal = {
        instance: null
    };

    $scope.modal.instance = $modal.open({
        template: '<my-modal-directive modal="modal"></my-modal-directive>',
        scope: $scope
    });
}

function MyModalDirective() {
    scope: {
        modal: '='
    },
    link: function($scope) {
         //here you can access $scope.modal.instance
    }
} 

OriginalL'auteur Sergiu Paraschiv

C'est encore plus de retard de réponse, mais quelqu'un peut trouver utile.

J'ai amélioré Fernando Felix réponse et fait mon propre assez souple directive, qui communique avec le contrôleur, qui, je pense, pourrait être une solution pour cette question.

Directive

var modalUrl = function ($modal) {
return {
restrict: 'A', //A: attribute
scope: { //isolate scope
'modalUrl': '@', //modal view url to render the modal content
'modalController': '@', //modal view controller (optional)
'value': "="
},
link: function(scope, element, attrs){
console.log('modalUrl link');
var modalInstance;
var template = [
'<div class="modal-body">',
'<button ng-click="$close()" type="button" class="close" aria-label="Close">',
'<span aria-hidden="true">&times;</span>',
'</button>',
'<div ng-include="\'' + scope.modalUrl + '\'"></div>',
'</div>'
].join('');
element.bind('click', function(){
//see modal reference from ui bootstrap at <http://angular-ui.github.io>
modalInstance = $modal.open({
size: attrs.size,
animation: true,
template: template,
resolve: {
params: function () {
console.log('value passed to modal:');
console.log(scope.value);
return scope.value;
}
},
controller: scope.modalController
});
modalInstance.result.then(
function (returnValue) {
//alert('value: '+returnValue);
console.log('modal returnValue:');
console.log(returnValue);
scope.value = returnValue;
}, function () {
console.log('Modal dismissed at: ' + new Date());
}
);
});
}
};
}
modalUrl.$inject = ['$modal'];
angular.module('app').directive('modalUrl', modalUrl);

Contrôleur

var HelloCtrl = function ($scope, $modalInstance, modalVal) {
//$modalInstance: same from  from ui bootstrap
console.log('Hello init!');
//modalVal is the init modal value passed via directive
console.log(modalVal);
//your code
$scope.name = modalVal;
$scope.ok = function() {                                        
$modalInstance.close(this.name); //returnValue
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
}
HelloCtrl.$inject = ['$scope', '$modalInstance','params'];
angular.module('app').controller('HelloCtrl',HelloCtrl);

inline modèle

<script type="text/ng-template" id="hello.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<input type="text" ng-model="name" />                                        
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn" ng-click="cancel()">Cancel</button>
</div>
</script>

C'est un contrôleur et le modèle par déroulant type, alors vous pouvez l'appeler plusieurs fois avec:

<a modal-url="hello.html" modal-controller="HelloCtrl" value="yourVal" ng-init="yourVal='test'" href="#">Click here to open the modal</a>

Vous pouvez initialiser la valeur, quelle que soit ie. objet, tableau etc.

ou externe modèle

À peu près la même, il suffit de changements de l'url et le fichier de modèle est utilisé pour le modèle.

<a modal-url="/modal/test1.html" modal-controller="HelloCtrl" value="yourVal" ng-init="yourVal='test'" href="#">Click here to open the modal</a>

test1.html

<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<input type="text" ng-model="name" />                                        
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn" ng-click="cancel()">Cancel</button>
</div>

Taille modale etc.

Juste ajouter un paramètre size="sm|lg" pour le modal lien/bouton ie.
Cliquez ici pour ouvrir le modal
Pour la taille standard, passez le paramètre.
Vous pouvez améliorer vous-même en utilisant le lien fonction attrs.

OriginalL'auteur Karol Websky