Отображение бутстрапа Модальный диалог от Angular Controller

Question

Я пытаюсь выяснить, как я могу представить модальный диалог загрузки из моего Углового контроллера. В принципе, у меня есть таблица. Когда пользователь нажимает на строку таблицы, я хочу представить модальное диалоговое окно, содержащее сведения о выбранной строке.

Способ, которым я собираюсь приблизиться к этому, состоит в том, чтобы каждая строка таблицы отвечала на ng-click. Щелчок ng вызовет функцию в контроллере, и эта функция представит модальное диалоговое окно, а также передаст ему данные, необходимые для отображения.

Я знаю, как отображать модальный диалог из самого представления, но я не уверен, как я могу вызвать модальный контроллер. Есть идеи?

Контроллер для представления имеет следующую функцию, которая будет вызываться, когда пользователь выбирает строку для просмотра модального диалога.

$scope.rowClicked = function(rowID){ 
    $scope.dataForModal = Data.get(rowID, function(err,data){ 
     //Here is where I'd like to display the modal dialog in the view 
    }); 
} 

Answer 1

См http://angular-ui.github.io/bootstrap/#/modal

Используйте ng-click="showDetails(item)" на/ряд клеток с вашей точки зрения. Затем используйте этот код в контроллере, чтобы показать Modal:

$scope.showDetails = function (item) { 
    var modalInstance = $modal.open({ 
     templateUrl: 'yourview.html', 
     controller: 'DetailModalController',      
     resolve: { 
      item: function() { 
       return item; 
      },        
     } 
    }); 

    modalInstance.result.then(function (item) { 
     // ok 
    }, function() { 
     // dismiss 
    }); 
}; 

Ваш контроллер модальное может быть что-то вроде этого:

angular.module('app').controller('DetailModalController', [ 
    '$scope', '$modalInstance', 'item', 
    function ($scope, $modalInstance, item) { 

     $scope.item = item; 

     $scope.dismiss = function() { 
      $modalInstance.dismiss(); 
     }; 

     $scope.close = function() {      
      $modalInstance.close($scope.item);      
     }; 
    }; 
}]); 

С $modalInstance.close($scope.item); вы можете передать объект. С $modalInstance.dismiss(); вы отклоняете модальный объект без объекта.