Nie można otworzyć okna modemu ładowania początkowego jako trasy

Używam programu ładującego do wyświetlenia modala i chcę, aby był wyświetlany po kliknięciu znacznika zakotwiczenia jako trasy. Ale dostaję błąd modułu & nie można dowiedzieć się, jak rozwiązać ten problem.Nie można otworzyć okna modemu ładowania początkowego jako trasy

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

kod w plnkr: http://plnkr.co/edit/VbvuWzLqkICFzBYI9sL5?p=preview

Źródło

2013-12-14 user1184100

Demo jest nękane problemami. Nie zapisano pliku angular-route.js. Nie dostarczenie domyślną ścieżkę korzystając otherwise i umieszczone html wewnątrz 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

Będziesz także napotkasz problemy deklarujących samą ng-controller w znacznikach, jak w konfiguracja trasy ... wybierz jedną lub drugą

Źródło

2013-12-14 17:19:12 charlietfl

mam prawie ten sam problem jak to pytanie - choć wciąż nie może dostać pracy - opieki spojrzeć? http://stackoverflow.com/questions/21883559/opening-a-modal-in-a-route-inangularjs-with-angular-ui-bootstrap – Darren

Twój plunker brakuje zależności ngRoute. W nowszych wersjach kanciasty ngRoute jest oddzielna biblioteka, która musi ujęte oddzielnie i uznane jako zależność modułu do modułu aplikacji:

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

Również wasze drogi nie są w pełni określone.

Również twoje szablony (<script type="text/ng-template">) są zdefiniowane wewnątrz elementu <div ng-view>. ng-view to dyrektywa, która zastąpi zawartość elementu div hosta po rozstrzygnięciu trasy, więc lepsze miejsce dla szablonów znajduje się poza elementem 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>

Źródło

2013-12-14 17:21:48 Stewie

Nie można otworzyć okna modemu ładowania początkowego jako trasy

Odpowiedz

Powiązane problemy