使用angular-ui-bootstrap在AngularJS中的路徑中打開模態

Question

我試圖做的基本上是在這里回答無法打開引導模態窗口作為路線

然而，我的解決方案是行不通的。 我收到一個錯誤

Error: [$injector:unpr] Unknown provider: $modalProvider <- $modal

My app has the ui.bootstrap module injected - here is my application config

var app = angular.module('app', ['ui.router', 'ui.bootstrap','ui.bootstrap.tpls', 'app.filters', 'app.services', 'app.directives', 'app.controllers'])

    // Gets executed during the provider registrations and configuration phase. Only providers and constants can be
    // injected here. This is to prevent accidental instantiation of services before they have been fully configured.
    .config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {

        // UI States, URL Routing & Mapping. For more info see: https://github.com/angular-ui/ui-router
        // ------------------------------------------------------------------------------------------------------------   

        $stateProvider
            .state('home', {
                url: '/',
                templateUrl: '/views/index',
                controller: 'HomeCtrl'

            })
            .state('transactions', {
                url: '/transactions',
                templateUrl: '/views/transactions',
                controller: 'TransactionsCtrl'
            })      
            .state('login', {
                url: "/login",
                templateUrl: '/views/login',
                controller: 'LoginCtrl'                
            })

            .state('otherwise', {
                url: '*path',
                templateUrl: '/views/404',
                controller: 'Error404Ctrl'
            });

        $locationProvider.html5Mode(true);

    }])

我已將控制器縮減為以下內容：

appControllers.controller('LoginCtrl', ['$scope', '$modal', function($scope, $modal) {
    $modal.open({templateUrl:'modal.html'});
}]);

最終，我希望實現的是當需要登錄時實際上並不是登錄頁面，而是打開一個對話框。

我也嘗試在ui-router狀態方法中使用onEnter函數。 無法使這個工作。

有任何想法嗎？

UPDATE

好的 - 事實證明，同時使用ui-bootstrap.js和ui-bootstrap-tpls打破了這一點 - 在閱讀文檔之后我認為你需要模板來使用ui-bootstrap。 雖然似乎所有的掠奪者只在.tpls文件中加載 - 一旦我刪除了ui-bootstrap文件我的模態工作......我瞎了嗎？ 或者它不是真的在github上的文檔中說出你需要哪一個？ -

現在我只需要弄清楚如何防止我的網址實際進入/登錄，而不是只顯示模態:)

更新2

好的，所以通過在服務中調用$ state.go（'login'）為我做這個。

Answer 1

嗨，我很難解決類似的問題。 但是，我能夠解決它。 這是你可能需要的。

app.config(function($stateProvider) {
  $stateProvider.state("managerState", {
      url: "/ManagerRecord",
      controller: "myController",
      templateUrl: 'index.html'
    })
    .state("employeeState", {
      url: "empRecords",
      parent: "managerState",
      params: {
        empId: 0
      },
      onEnter: [
        "$modal",
        function($modal) {
          $modal.open({
            controller: "EmpDetailsController",
            controllerAs: "empDetails",
            templateUrl: 'empDetails.html',
            size: 'sm'
          }).result.finally(function() {
            $stateProvider.go('^');
          });
        }
      ]
    });
});

點擊這里獲取plunker。 希望能幫助到你。

Answer 2

我正在做類似的事情，這是我的解決方案。

HTML代碼

<a ui-sref="home.modal({path: 'login'})" class="btn btn-default" ng-click="openModal()">Login</a>

狀態配置

$stateProvider
  // assuming we want to open the modal on home page
  .state('home', {
    url: '/',
    templateUrl: '/views/index',
    controller: 'HomeCtrl'
  })
  // create a nested state
  .state('home.modal', {
    url: ':path/'
  });

家庭控制器

//... other code
$scope.openModal = function(){
  $modal.open({
    templateUrl: 'path/to/page.html',
    resolve: {
            newPath: function(){
                return 'home'
            },
            oldPath: function(){
                return 'home.modal'
            }
        },
    controller: 'ModalInstanceController'
  });
};
//... other code

最后，模態實例控制器。 此控制器將模態事件（打開/關閉）與URL路徑更改同步。

angular.module("app").controller('ModalInstanceController', function($scope,    $modalInstance, $state, newPath, oldPath) {
    $modalInstance.opened.then(function(){
        $state.go(newPath);
    });
    $modalInstance.result.then(null,function(){
        $state.go(oldPath);
    });
    $scope.$on('$stateChangeSuccess', function () {
        if($state.current.name != newPath){
            $modalInstance.dismiss('cancel')
        }
    });
});

Answer 3

您可以使用與要顯示模態的頁面相同的templateUrl和controller創建一個狀態，向其添加params對象

$stateProvider
    .state('root.start-page', {
        url: '/',
        templateUrl: 'App/src/pages/start-page/start-page.html',
        controller: 'StartPageCtrl'
    })
    .state('root.login', {
        url: '/login',
        templateUrl: 'App/src/pages/start-page/start-page.html',
        controller: 'StartPageCtrl',
        params: {
            openLoginModal: true
        }
    })

在頁面控制器中，使用此參數打開模態

.controller("StartPageCtrl", function($scope, $stateParams) {
    if ($stateParams.openLoginModal) {
        $scope.openLoginModal();
    }

Answer 4

我發現了一個方便的提示，讓這個工作。 可能有一些警告，但它對我有用。 你可以傳遞一個result但我沒有必要。

使用finally而不是then promise會為我排序。 我還必須將以前的狀態存儲在rootScope上，以便我們知道要返回什么。

將以前的狀態保存到$ rootScope

$rootScope.previousState = 'home';
$rootScope.$on('$stateChangeSuccess', function(ev, to, toParams, from, fromParams){
    $rootScope.previousState = from.name;
})

使用onEnter的狀態

$stateProvider.state('contact', {
    url: '/contact',
    onEnter: function ($state, $modal, $rootScope){
        $modal.open({
            templateUrl: 'views/contact.html',
            controller: 'ContactCtrl'
        }).result.finally(function(){
            $state.go($rootScope.previousState);
        })
    }
});