Impossibile $ uibModal all'interno della direttiva ma accessibile nel controller

Question

Voglio rendere direttiva l'apertura di un modal. Ma $ uibModal non è definito all'interno della direttiva.

var app=angular.module("app",['ui.bootstrap']); 

app.controller('AppCtrl', function ($scope, $uibModal) { 
    console.log("$uibModal controller",$uibModal);//getting object 
}); 

app.directive('showPopUp',function() { 
    return { 
     restrict: 'EA', 
     link: function(scope, el, attrs,$uibModal) { 
      console.log("$uibModal",$uibModal);//undefined here 
       var modalInstance = $uibModal.open({ 
        animation: $scope.animationsEnabled, 
        templateUrl: 'popup.html', 
       }); 

       modalInstance.result.then(function (selectedItem) { 
        scope.selected = selectedItem; 
       }, function() { 
       }); 

     } 
    } 
}); 

Come posso utilizzare $ uibModal nella mia direttiva per aprire modale?

Answer 1

La funzione di collegamento della direttiva non è iniettabile, richiede un set fisso di parametri in ordine fisso. Ma si può iniettare servizi in funzione direttiva stessa:

app.directive('showPopUp', function($uibModal) { 
    return { 
     restrict: 'EA', 
     link: function(scope, el, attrs) { 

      var modalInstance = $uibModal.open({ 
       animation: scope.animationsEnabled, 
       templateUrl: 'popup.html', 
      }); 

      modalInstance.result.then(function(selectedItem) { 
       scope.selected = selectedItem; 
      }, function() {}); 

     } 
    } 
}); 

Demo:http://plnkr.co/edit/jwNOM94DtyRIXTdhvJmy?p=preview