Невозможно вызвать контроллер в угловой ui bootstrap $ modal

Question

Я хочу создать модальный всплывающий щелчок по кнопке. Я использую ui bootstrap из углового с модальным сервисом.

Теперь, когда я нажимаю кнопку, я пишу следующий код.

$scope.modalOpen = function() { 
        var modalInstance = $modal.open({ 
         templateUrl: 'views/includes/someModal.html', 
         controller : //here I want to use the same controller where the current function is getting called 
        }); 
       }; 

Я не могу назвать тот же контроллер. Я ошибаюсь? Я попытался Google, но не успех :(Пожалуйста предложить Спасибо заранее :)

Answer 1

Если открыть модальное из контроллера, вы можете попробовать что-то вроде этого:.

var myCtrl = this; 
$scope.modalOpen = function() { 
     var modalInstance = $modal.open({ 
      templateUrl: 'views/includes/someModal.html', 
      controller : myCtrl 
     }); 
}; 

Но я не думаю, что это хорошая практика повторного использования экземпляра контроллера.

Answer 2

Я исхожу из того, что вы хотите сделать это, чтобы вы могли обмениваться данными (состоянием) между модальным и текущим контроллером.

Вы можете достичь этого без совместного использования контроллера, используя поле resolve в модальной конфигурации.

function CurrentController($scope, $modal) { 
    $scope.list = []; 

    $scope.modalOpen = function() { 
    var modalInstance = $modal.open({ 
     templateUrl: 'views/includes/someModal.html', 
     controller : 'SomeOtherController', 
     resolve: { 
     list: function() { return $scope.list; }   
     } 
    }); 
    }; 
} 

Это означает, что list будет введен в зависимость SomeOtherController.

function SomeOtherController($scope, list) { 
    $scope.list = list; 
} 

resolve (Type: Object) - Members that will be resolved and passed to the controller as locals; it is equivalent of the resolve property in the router.

Смотрите docs для $modal в угловых Ui начальной загрузки.

Answer 3

Возможно, вы не хотите использовать этот контроллер. Поскольку область не изолирована, ваш модаль может вызывать функции с вашего текущего контроллера. Вы также можете иметь встроенный контроллер, например:

Причина, по которой вы не можете использовать функции из текущей области, вам придется предоставить модальную текущую область действия для этого. Будьте осторожны, когда вы это сделаете. Ваш модальный может испортить ваш текущий объект. Я пошел вперед и создал кнопку «сохранить» и «отменить», чтобы вы могли отменить изменения.

Html

<div ng-controller="simpleController"> 
    {{ item.title }} 
    <button ng-click="open();">Click Me</button> 
</div> 

шаблон модальный

<script type="text/ng-template" id="views/includes/someModal.html"> 
    <div class="modal-header"> 
     <h3 class="modal-title">Title!</h3> 
    </div> 
    <div class="modal-body"> 
     title: {{ item.title }}<br/> 
     Click the buttons below to change the title throught the controller's function 
     <button ng-click="fn('test');">test</button> 
     <button ng-click="fn('test 1');">test 1</button> 
     <button ng-click="fn('test 2');">test 2</button> 
    </div> 
    <div class="modal-footer"> 

     <button ng-click="close(true);">Save</button> 
     <button ng-click="close();">Close</button> 
    </div> 
</script> 

Javascript

angular.module("myApp", ['ui.bootstrap']).controller("simpleController", ["$scope", "$uibModal", function($scope, $uibModal){ 
    $scope.item = { title: "test", stuff: "other stuff"}; 
    $scope.fn = function(title){ 
     $scope.item.title = title; 
    }; 
    $scope.open = function() { 
     var intialItem = angular.copy($scope.item); 
     var modalInstance = $uibModal.open({ 
      templateUrl: 'views/includes/someModal.html', 
      controller: ["$scope", function(scope){//add other functionality here     
       scope.close = function(save){ 
        if(!save){ 
         $scope.item = intialItem; 
        } 
        modalInstance.close(); 
       } 
      }], 
      scope: $scope 
     }).result.then(function(){ 
     }, function(){ 
      $scope.item = intialItem;//modal was dismissed 
     }); 


    }; 
}]);