使用ui-routing

时间:2017-03-19 20:14:54

标签: javascript angularjs angular-ui-router

我尝试使用ui-routing创建角度模态向导。在我的模态窗口中,我有两个嵌套视图,它们应该负责通过ui-sref指令在模态窗口内导航。虽然我添加了#ui.bootstrap'和' ui.router'我的应用程序声明中的模块,当我单击按钮时,应该在控制台上打开enitre模式出现错误:

" TransitionRejection(类型:6,消息:转换错误,详细信息:

  

错误:[$ injector:unpr]未知提供商:$ modalProvider< - $ modal"。

app.js:

/* definition of angularJS application and include modules*/
var app = angular.module('accTrader', [
    'ui.router', 'ui.bootstrap', 'LocalStorageModule', 'duScroll', 'ngTouch'
]);

// routing config
app.config(function ($stateProvider, $urlRouterProvider) {


    $urlRouterProvider.otherwise('/');


        $stateProvider        
        .state("home", {
            url: "/",
            template: '<button class="btn btn-default" ui-sref="modal"> Modal</button>',
            controller: 'MainCtrl'
         })
        .state("aboutus", {
            url: "/aboutus",
            templateUrl: "app/views/aboutus.html" 
         })

        .state("category", {
            url: "/category/gameid/:gameid",
            controller: 'CategoryCtrl',
            templateUrl: 'app/views/category.html'
        }) 
        .state('modal', { // MODAL
            parent: 'home',
            url: '/modal',
            onEnter: ['$modal', '$state', function($modal, $state) {
                console.log('Open modal');
                $modal.open({
                template: '<button class="btn btn-danger" ui-sref="signin"> sign-in </button> <button ui-sref="signout" class="btn btn-success"> sign-out </button> <div ui-view="modal"></div>',
                backdrop: false,
                windowClass: 'right fade'
            }).result.finally(function() {
              $state.go('list');
          });
        }]
      })
      .state('signin', {
        url: '/signin',
        parent: 'modal',
        views: {
          'modal@': {
            template: '<p>sign-in</p>'
            }
          }
      })
      .state('signout', {
        url: '/signout',
        parent: 'modal',
        views: {
          'modal@': {
            template: '<p>sign-out</p>'
            }
          }
      })
}); // END ROUTING CONFIG

index.html的主要部分:

...
 <body ng-cloak id="top" ng-controller="ExternalCtrl">    
    <div ui-view></div>
    <a href="#top" du-smooth-scroll="">
        <div id="backToTop" class="bottomMenu hide"></div>
    </a>
 ...   

1 个答案:

答案 0 :(得分:0)

检查您的UI Bootstrap版本。一段时间以来,它已经$uibModal而不是a~1.4

它已在1.1.0版提交8c7b9e4中更新。

如果您使用的是1.1.0,那么您应该注射$modal而不是$uibModal