Không thể chỉ thị $ uibModal bên trong nhưng có thể truy cập trong bộ điều khiển

Question

Tôi muốn đưa ra chỉ thị để mở một phương thức. Nhưng $ uibModal không được định nghĩa bên trong chỉ thị.

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() { 
       }); 

     } 
    } 
}); 

Làm cách nào để sử dụng $ uibModal trong chỉ thị của tôi để mở phương thức?

Answer 1

Chức năng liên kết chỉ thị không được tiêm, phải mất tập hợp các tham số cố định theo thứ tự cố định. Nhưng bạn có thể tiêm dịch vụ vào chức năng chỉ thị riêng của mình:

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