web-dev-qa-db-ja.com

AngularJSのルートでangular-ui-bootstrapを使用してモーダルを開く

私はここで本質的に答えられたことをやろうとしています ルートとしてbootstrapモーダルウィンドウを開くことができません

しかし、私の解決策はうまくいきません。エラーが発生します

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関数を使用してみました。これも機能させることができませんでした。

何か案は？

[〜＃〜]更新[〜＃〜]

わかりました-結局のところ、ui-bootstrap.jsとui-bootstrap-tplsの両方があるとこれが壊れます-ドキュメントを読んだ後、ui-bootstrapで動作するテンプレートが必要だと思いました。すべてのプランカーは..tplsファイルにのみ読み込まれるようですが、ui-bootstrapファイルを削除すると、モーダルは機能します...ブラインドですか？それとも、githubのドキュメントでどれが必要かを実際に言っていないのですか？ -

モーダルを表示するだけでなく、URLが実際に/ loginに移動しないようにする方法を理解する必要があります:)

更新2

さて、サービスで$ state.go（ 'login'）を呼び出すことで、これを実行できます。

javascriptangularjsangular-ui-bootstrapangular-ui-router
7
Darren Wainwright

こんにちは私は同様の問題を乗り越えるのに苦労しました。しかし、私はそれを解決することができました。これはおそらくあなたが必要とするものです。

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

ここをクリック プランカーの場合。それが役に立てば幸い。

11
KaranVir Sharma

私は似たようなことに取り組んでおり、これが私の解決策です。

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')
        }
    });
});
5
George I.

モーダルを表示するページと同じ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();
    }
3
DarthVanger

これを機能させるための便利なヒントを見つけました。おそらく注意点がありますが、それは私にとってはうまくいきます。まだresultを渡すことができますが、私はそれを必要としません。

finallypromiseの代わりにthenを使用すると、これがソートされます。また、以前の状態を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);
        })
    }
});
2
harelpls