Modal打開angualrjs路線

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