부트 스트랩 모달 창을 경로로 열 수 없습니다.

저는 부트 스트랩을 사용하여 모달을 표시하고 경로로 앵커 태그를 클릭 할 때 표시하려고합니다. 하지만 모듈 오류가 발생했습니다. & 해결 방법을 찾을 수없는 것 같습니다. 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

데모는 문제에 시달리고있다. angular-route.js를 포함하지 않았습니다. 또한 같이 마크 업 같은 ng-controller을 선언하는 문제로 실행됩니다 당신은 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을 배치 경로 구성 ... 하나 또는 다른 선택

출처

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

플 런커에 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

부트 스트랩 모달 창을 경로로 열 수 없습니다.

답변

관련 문제