Question

嘿我正在使用bootstrap模态并在angularjs中调用它。它的工作性很好。唯一的问题是如何在angularjs路由中路由模态。我的代码：

内部控制器

var modalInstance = $modal.open({

templateUrl: 'webpages/home/loginModal.html'
});

modalInstance.result.then(function () {

}, function () {

});

内部路由

.when('/login', {

    templateUrl: function($routeParams) {

        return 'sitepages/home/home.html';
    },
    controller: 'PageViewController',
    reloadOnSearch: false
})

它只是路由我如何做的例子，我需要为模态找到路由。

Answer 1

您可以将状态用于此目的

$stateProvider.state("items.add", {
    url: "/add",
    onEnter: ['$stateParams', '$state', '$modal', '$resource', function($stateParams, $state, $modal, $resource) {
        $modal.open({
            templateUrl: "items/add",
            resolve: {
              item: function() { new Item(123).get(); }
            },
            controller: ['$scope', 'item', function($scope, item) {
              $scope.dismiss = function() {
                $scope.$dismiss();
              };

              $scope.save = function() {
                item.update().then(function() {
                  $scope.$close(true);
                });
              };
            }]
        }).result.then(function(result) {
            if (result) {
                return $state.transitionTo("items");
            }
        });
    }]
});

更多详情：https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state

Answer 2

您不需要路由

app.controller("ACtrl", ['$scope','$http', '$log', '$modal', 
 function($scope, http, $log, $modal){
   $scope.OpenModel = function () {
        var param = { appId: 1, price: 2.5 };
        var modalInstance = $modal.open({
            size: 'lg',
            backdrop: 'static',
            templateUrl: 'webpages/home/loginModal.html',
            controller: 'modalCtrl',
            resolve: {
                data: function () { return param; }
            }
        });
        modalInstance.result.then(function (response) {
            //Do whatever you want to do with reponse               
        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });
    }
 }

///Add your modal control here
app.controller("modalCtrl", ['$scope','$http', '$modalInstance', 'data', 
   function($scope, http, $modalInstance, data){

   // rest of the code goes here

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

模态打开与angularjs路线

2 个答案: