無法打開引導程序模式窗口作爲路線

我使用引導程序來顯示模式，並希望它在單擊錨點標記時顯示爲路線。但我得到一個模塊錯誤&似乎無法弄清楚如何解決它。無法打開引導程序模式窗口作爲路線

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

守則plnkr： http://plnkr.co/edit/VbvuWzLqkICFzBYI9sL5?p=preview

來源

2013-12-14 user1184100

演示與問題的困擾。你還沒有包含angular-route.js。您沒有提供使用otherwise默認的路徑，你放置在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你還會碰上標記聲明相同ng-controller中的問題路由配置...選擇其中一個或另一個

來源

2013-12-14 17:19:12 charlietfl

我有非常相同的問題，因爲這個問題 - 儘管仍然無法得到它的工作 - 照顧去看一看？ http://stackoverflow.com/questions/21883559/opening-a-modal-in-a-route-in-angularjs-with-angular-ui-bootstrap – Darren

您的運動員缺少ngRoute依賴項。在角新版本，ngRoute是需要單獨列入和聲明爲模塊依賴於你的應用模塊獨立的庫：

<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>

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

而且，你的路由尚未完全確定。

此外，您的模板（<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

無法打開引導程序模式窗口作爲路線

回答

相關問題