使用 angular-ui-bootstrap 在 AngularJS 中的路线中打开模式

opening a modal in a route in AngularJS with angular-ui-bootstrap(使用 angular-ui-bootstrap 在 AngularJS 中的路线中打开模式)

问题描述

我正在尝试做这里基本上回答的事情无法将引导模式窗口作为路线打开

I am trying to do what was essentially answered here Unable to open bootstrap modal window as a route

但我的解决方案行不通.我收到一个错误

Yet my solution just will not work. I get an error

错误:[$injector:unpr] 未知提供者:$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);

    }])

我已将控制器缩减为以下内容:

I have reduced my controller to the following:

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

最终，我希望实现的是，当需要登录时，实际上并不是转到登录页面，而是弹出一个对话框.

我也尝试过在 ui-router 状态方法中使用 onEnter 函数.也无法正常工作.

I have also tried using the onEnter function in the ui-router state method. Couldn't get this working either.

有什么想法吗?

更新

好的-事实证明，同时拥有 ui-bootstrap.js 和 ui-bootstrap-tpls 会破坏这一点-阅读文档后，我认为您需要模板才能与 ui-bootstrap 一起使用.虽然似乎所有的 plunker 都只加载到 ..tpls 文件中——一旦我删除了 ui-bootstrap 文件，我的模态就可以工作了……我是瞎了吗?或者它不是真的在 github 上的文档中说明您需要哪一个吗?-

Ok - so as it turns out, having both ui-bootstrap.js AND ui-bootstrap-tpls breaks this - After reading the docs I thought you needed the templates to work WITH the ui-bootstrap. though it seems all the plunkers only load in the ..tpls file - once I removed the ui-bootstrap file my modal works...Am i blind? or doesn't it not really say which one you need in the docs on github? -

现在我只需要弄清楚如何防止我的 url 实际进入/login，而不仅仅是显示模式 :)

Now i just need to figure out how to prevent my url from actually going to /login, rather than just show the modal :)

更新 2

好的，所以通过在服务中调用 $state.go('login') 可以为我完成此操作.

Ok, so by calling $state.go('login') in a service does this for me.

推荐答案

我很难解决类似的问题.但是，我能够解决它.这可能是您需要的.

Hi I had a hard time getting through the similar problem. However, I was able to resolve it. This is what you would probably need.

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

点击这里查看插件.希望对您有所帮助.

Click here for plunker. Hope it helps.

这篇关于使用 angular-ui-bootstrap 在 AngularJS 中的路线中打开模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！