2014-12-21 11 views
6

Używałem do tego wcześniejszej trasy i działało dobrze, ale w przypadku Routera UI, odnośniki nie są już klikalne lub przynajmniej przez większość czasu nie są. Gdy są bardzo losowe, nie wyświetlają szablonów html, których używam.Ui-sref nie generuje klikalnych linków/nie działa

HTML:

<head> 
    <title>Tutorial</title> 

    <script src="lib/angular/angular.js"></script> 
    <script src="lib/angular/angular-ui-router.min.js"></script> 
    <script src="js/app.js"></script> 
    <script src="js/controllers.js"></script> 

</head> 

<body> 

    <ng-view></ng-view> 

    <ul class="menu"> 
     <li><a ui-sref="view1">view1</a></li> 
     <li><a ui-sref="view2">view2</a></li> 
    </ul> 

js

angular.module('myApp', [ 
    'myApp.controllers', 
    'ui.router' 
    ]); 

angular.module('myApp').config(function($stateProvider, $urlRouterProvider) { 

    $stateProvider.state('view1',{ 
     url: '/view1', 
     controller:'Controller1', 
     templateUrl:'/view1.html' 
    }).state('view2', { 
     url: '/view2/:firstname/:lastname', 
     controller: 'Controller2', 
     resolve: { 
      names: function() { 
       return ['Misko', 'Vojta', 'Brad']; 
      } 
     }, 
     templateUrl: '/view2.html' 
    }); 

    $urlRouterProvider.otherwise('/view1'); 

}); 


angular.module('myApp.controllers', []).controller('Controller1', function($scope, $location, $state) { 

    $scope.loadView2=function() { 
     $state.go('view2', { 
      firstname: $scope.firstname, 
      lastname: $scope.lastname 
     }); 
    }; 
}).controller('Controller2', function($scope, $stateParams, names) { 
    $scope.firstname = $stateParams.firstname; 
    $scope.lastname = $stateParams.lastname; 
    $scope.names = names; 

}); 

jestem postępując zgodnie z instrukcjami w ebook SitePoint na angularjs, więc nie jestem pewien, co mam robienie źle lub tego, co przegapiłem.

http://plnkr.co/edit/amh3nZmyB7lC2IQi3DIn

+0

Nie widzę "ui-view" w dowolnym miejscu znaczników, więc poglądy stanów najprawdopodobniej nie zostaną wyrenderowane i wstawione – JAAulde

+0

@JAAulde Czy powinienem używać tego zamiast ng-view lub w połączeniu z nim? –

+0

Pojedynczy 'ui-view' powinien istnieć w głównym pliku HTML. Twoje stany najwyższego poziomu będą renderowane i tam wstrzykiwane. Nie powinieneś potrzebować 'ng-view'. Stany mogą mieć podstan, a każdy szablon stanu, który ma podstan powinien mieć "widok ui", w którym będą wstawiane jego renderowane podstan. – JAAulde

Odpowiedz

9

nie zobaczyć ui-view gdziekolwiek w znacznikach, więc obejrzy członkowskich są najprawdopodobniej nie są renderowane i wstrzykiwać. Nie należy potrzebować . Pojedynczy ui-view powinien istnieć w głównym pliku HTML. Twoje stany najwyższego poziomu będą renderowane i tam wstrzykiwane. Stany mogą mieć podstan, a każdy wzorzec stanu, który ma podstan, powinien mieć własny, gdzie jego wstawione podstacje będą wstrzykiwane.

Przejrzyj ui-router's readme, aby dowiedzieć się, jak to działa. Ponadto mają one dobry demo app, którego źródło naprawdę pomogło mi zrozumieć, o czym jest ten stanowy silnik routingu i jak go używać.

2

pomocna info, mam nadzieję ...

Mimo powyższych odpowiedzi są prawidłowe (brak ui-view, przedstawieniu ui.router, etc.), jakie napotkasz sytuacji, gdy inne problemy z obciążeniem widoku spowoduje linki do nie być generowane. Na przykład, dziś rano zapomniałem odwołać się do modułu angular-cache i wystąpił problem z ładowaniem CacheFactory (zupełnie niezwiązanym z ui.router). Do czasu rozwiązania odniesień, ui.router był martwy w wodzie.

+0

To mi pomogło. Miałem niepowiązany błąd (zerowanie) i uniemożliwiał domyślne zachowanie ui-sref. Dzięki! – Tico

Powiązane problemy