ブートストラップモーダルウィンドウをルートとして開くことができません

私はモーダルを表示するためにブートストラップを使用しており、ルートとしてアンカータグをクリックすると表示されます。しかし、モジュールエラーが発生しました&解決方法を理解できていないようです。 plnkrでブートストラップモーダルウィンドウをルートとして開くことができません

HTML

<div ng-view> 
    <div ng-controller="DetailPageCtrl"> 
     <a href="#/profile">Click here to open modal!</a> 
    </div> 
    <script type="text/ng-template" id="modalContainer"> 
     <div ng-controller="ProfileModalCtrl"></div> 
    </script> 
</div>

var app = angular.module('plunker', ['ui.bootstrap']); 
app.config(function($routeProvider) { 
    $routeProvider 
     .when('/profile', { 
      templateUrl : 'modalContainer', 
      controller : 'ProfileModalCtrl' 
     }); 
}) 
app.controller('DetailPageCtrl', function($scope) { 
    console.log("detail page"); 
}); 
app.controller('ProfileModalCtrl', function($scope, $modal) { 
    $modal.open({templateUrl : 'modal.html'}); 
});

コード： http://plnkr.co/edit/VbvuWzLqkICFzBYI9sL5?p=preview

出典

2013-12-14 user1184100

デモは問題に悩まされています。 angle-route.jsは含まれていません。あなたはotherwiseを使用して、デフォルト・パスを提供しなかった、あなたはまた、のようなマークアップで同じng-controllerを宣言する問題に実行されますng-view

/* include script tag with `angular-route.js , then inject as dependency*/ 
var app = angular.module('plunker', ['ui.bootstrap', 'ngRoute']); 
app.config(function($routeProvider) { 
    $routeProvider.when('/', { 
    templateUrl: 'default' 
    }) 
    .when('/profile', { 
     templateUrl: 'modalContainer', 
     controller: 'ProfileModalCtrl' 
    }).otherwise({ 
     redirectTo: '/' 
    }) 
});

<div ng-view><!-- leave empty --></div>

DEMO

内のhtmlを置きますルート設定...どちらか一方を選択する

出典

2013-12-14 17:19:12 charlietfl

私はこの質問のようにほとんど同じ問題を抱えている - まだそれが働いて得ることができないけれども - 注意して見てみ？ http://stackoverflow.com/questions/21883559/opening-a-modal-in-a-route-in-angularjs-with-angular-u-bootstrap – Darren

plunkerにngRouteの依存関係がありません。

var app = angular.module('plunker', ['ngRoute', 'ui.bootstrap']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script> 
<script src="http://code.angularjs.org/1.2.4/angular-route.js"></script>

はまた、あなたのルートが完全に定義されていません。角度の新しいバージョンでは、 ngRouteは別に含まれ、アプリモジュールへのモジュールの依存関係として宣言する必要がある別のライブラリです。

また、テンプレート（<script type="text/ng-template">）は<div ng-view>要素内で定義されています。 ng-viewは、ルートが解決されたときにホストdiv要素の内容を置き換える指示文です。したがって、テンプレートのより良い場所はng-view要素の外です。

Fixed PLUNKER

var app = angular.module('plunker', ['ngRoute', 'ui.bootstrap']); 

app.config(function($routeProvider) { 
$routeProvider 
    .when('/profile', { 
    templateUrl : 'modalContainer', 
    controller : 'ProfileModalCtrl' 
    }) 
    .when('/detail', { 
    templateUrl : 'detail.html', 
    controller : 'DetailPageCtrl' 
    }) 
    .otherwise({redirectTo: '/detail'}); 
}); 

app.controller('DetailPageCtrl', function($scope) { 
console.log("detail page"); 
}); 

app.controller('ProfileModalCtrl', function($scope, $modal) { 
    $modal.open({templateUrl : 'modal.html'}); 
});

<!doctype html> 
<html ng-app="plunker"> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script> 
    <script src="http://code.angularjs.org/1.2.4/angular-route.js"></script> 

    <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.7.0.js"></script> 

    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> 
    </head> 
    <body> 

    <div ng-controller="DetailPageCtrl"> 
     <a href="#/profile">Click here to open modal!</a> 
    </div> 

    <script type="text/ng-template" id="modalContainer"> 
     <div ng-controller="ProfileModalCtrl"></div> 
    </script> 

    <div ng-view></div> 

</body> 
<script src="script.js"></script> 
</html>

出典

2013-12-14 17:21:48 Stewie

ブートストラップモーダルウィンドウをルートとして開くことができません

答えて

関連する問題