CODEWITHSUNDEEP
modal-dialogangularjs-routing
user3406754
user3406754

Reputation: 69

Modal open with angualrjs route

Hey I am working with bootstrap modal and calling it in angularjs. Its working good. Only the problem is that how can I route modal in angularjs routing. My Code:

Inside Controller

var modalInstance = $modal.open({

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

modalInstance.result.then(function () {

}, function () {

});

Inside Routing

.when('/login', {

    templateUrl: function($routeParams) {

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

Its just example of routing how I am doing it, I need to find routing for modal.

Upvotes: 0

Views: 615

Answers (2)

Ali Adravi
Ali Adravi

Reputation: 22723

You don't need the routing for it

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');
    };
 }
}

Upvotes: 0

alexey
alexey

Reputation: 622

You can use states for this purposes

$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");
            }
        });
    }]
});

More details: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state

Upvotes: 1

Related Questions