模态中的路径不会工作angularjs

时间:2017-04-03 12:15:57

标签: angularjs

我的模态路线有问题,我可以检索我的第一条路线(" /",menu.html)但是当我按下按钮时,其他路线不会出现。

这是我的路线:

angular.module('ui.bootstrap.demo').config(function($stateProvider, $urlRouterProvider){    
    $stateProvider
        .state("foo", {
            url: "/foo",
            template: '<h1>foo</h1>'
        })
        .state("menu", {
            url: "/",
            templateUrl: 'menu.html'
        })
        .state("bar", {
            url: "/bar",
            template: '<h1>bar</h1>'
        })

    $urlRouterProvider.otherwise("/");
});

这是我的div视图模式:

<div class="modal-header">
    <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" id="modal-body">
    <div class="row">
        <div class="span12 ui-view-container">
            <div class="well" ui-view></div>        
        </div>
    </div>       
</div>
<div class="modal-footer">
    <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
    <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
</div>

这是我的menu.html

<div class="navbar">
    <div class="navbar-inner">
        <a class="brand" href="#">Quick Start</a>
        <ul class="nav">
            <li><a href="#/foo">Route 1</a></li>
            <li><a href="#/bar">Route 2</a></li>
        </ul>
    </div>
</div>

我用模态制作了simple plunker

1 个答案:

答案 0 :(得分:2)

状态提供程序有ui-sref来处理使用州名导航的路由。

<ul class="nav">
   <li><a ui-sref="foo">Route 1</a></li>
   <li><a ui-sref="bar">Route 2</a></li>
</ul>

<强>更新

打开模态时,通过$state.go('menu')将其运行到默认状态“菜单”。 为了使其工作,请在控制器中注入$ state,如下所示:

angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', 
function ($uibModal, $log, $document, $state) {
 ......

  $ctrl.open = function (size, parentSelector) {
    $state.go('menu');
    ......
  }
});

Plunker更新了评论查询。