在路由与角UI的引导AngularJS打开一个模态 [英] opening a modal in a route in AngularJS with angular-ui-bootstrap

问题描述

我试图做的基本上是在这里得到解答<一个href=\"http://stackoverflow.com/questions/20585541/unable-to-open-bootstrap-modal-window-as-a-route\">Unable打开引导模式窗口作为路由

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

错误：[$喷油器：unpr]未知提供商：$ modalProvider＆LT; - $模式

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

归根结底，我希望实现的是当需要登录实际上没有进入登录页面，而是弹出一个对话框。

我也使用的OnEnter 功能在 UI路由器状态的方法尝试。无法得到这个工作的任何

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

任何想法？

更新

确定 - 所以事实证明，同时具有UI的bootstrap.js和UI，引导，第三方物流企业打破了这种 - 读我还以为你所需要的模板与UI，引导工作的文档之后。虽然看似一切plunkers只在..tpls文件加载 - 一旦我删除了UI的引导文件我的语气作品...我是瞎子？或者没有它真的不能说你在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? -

现在我只需要弄清楚如何从实际去/登录prevent我的网址，而不是仅仅显示模式：）

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（'登录'）做到这一点对我来说。

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

推荐答案

我的工作类似的东西，这是我的解决方案。

I'm working on something similar and this is my solution.

HTML code

HTML code

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

Home控制器

Home controller

//... 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路径的变化同步模式的事件（开/关）。

Finally, the modal instance controller. This controller synchronizes the modal events (open/close) with URL path changes.

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

这篇关于在路由与角UI的引导AngularJS打开一个模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！