Как использовать ui-sref в вложенном Угловом UI-маршрутизаторе?

Это было тяжелое исследование часов и применение методов, однако я не могу решить проблему. В моем приложении есть три главных навигационных режима, которые являются домом, спортом и страной.Как использовать ui-sref в вложенном Угловом UI-маршрутизаторе?

<head> 
<script src="js/angular-ui-router.min.js"></script> 
<script src="js/angular.min.js"></script> 
<script src="js/index.js"></script> 
</head>

навигации выглядит следующим образом:
HTML выглядит, как показано ниже, который находится в index.html

<ul> 
    <li><a ui-sref="home">Home</a></li> 
    <li><a ui-sref="sports">Sports</a></li> 
    <li><a ui-sref="country">Country</a></li> 
</ul> 
<div ui-view></div>

В sports.html, есть и другие три навигации, которые не работают (они не являются даже кликабельными).

<ul> 
    <li><a ui-sref="sports.football">Football</a></li> 
    <li><a ui-sref="sports.weightlifting">Weightlifting</a></li> 
    <li><a ui-sref="sports.swimming">Swimming</a></li> 
</ul> 
<div ui-view></div>

Угловые выглядит как

$stateProvider 
.state('home', { 
url: '/', 
templateUrl: 'index.html'  
}) 
.state('sports', { 
url: '/sports', 
templateUrl: 'sports.html'  
})  
.state('country', { 
url: '/country', 
templateUrl: 'country.html'  
}) 
.state('sports.football', { 
url: '/football', 
templateUrl: 'sports/football.html'  
}) 
.state('sports.weightlifting', { 
url: '/weightlifting', 
templateUrl: 'sports/weightlifting.html'  
}) 
.state('sports.swimming', { 
url: '/swimming', 
templateUrl: 'sports/swimming.html'  
});

В принципе, когда пользователь открывает приложение, должно быть верхняя панель меню с домом, спортом и страной. Когда пользователь нажимает «Спорт», на этой странице должен быть показан другой вид/другая поднавигация, показывающая футбол, тяжелую атлетику и плавание. Однако эти вспомогательные навигационные функции не являются интерактивными и не работают.

Было бы признателен, если вы позволите мне найти причину проблемы.

источник

2017-01-24 John Smith

вы попробуете это -> щ-sref = "футбол" –

у вас есть какие-либо ошибки консоли? –

Я считаю, что вам нужно '' '' после пути, поэтому должно быть что-то вроде '.state ('home', { url: '/', templateUrl: 'index.html' }). State (' foo '... ' – MannfromReno

Нет проблем в вашем c ода. Возможно, вам могут быть недостатки в некоторых зависимостях. Посмотрите мой плукер. click here to view code demo

app.js

(function(){ 

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

    })();

router.js

(function(){ 

     'use strict'; 

     angular 
     .module('plunker') 
     .config(['$stateProvider', function($stateProvider) 
     { 
      $stateProvider 
      .state('home', { 
        url: '/', 
       templateUrl: 'home.html'  
       }) 
      .state('sports', { 
      url: '/sports', 
      templateUrl: 'sports.html'  
      })  
      .state('sports.football', { 
      url: '/football', 
      templateUrl: 'football.html'  
      }) 
      .state('sports.weightlifting', { 
      url: '/weightlifting', 
      templateUrl: 'weightlifting.html'  
      }) 
      .state('sports.swimming', { 
      url: '/swimming', 
      templateUrl: 'swimming.html'  
      }) 
      .state('country', { 
      url: '/country', 
      templateUrl: 'country.html'  
      }); 

     }]) 


    })();

источник

2017-01-24 23:16:55 Kalyan

Почему у вас есть две угловые конфигурации наверху? Что оно делает? .module ('plunker', ['ui.router']); углового .module ('plunker') .config ([ '$ stateProvider', функция ($ stateProvider) –

@JohnSmith:.. К сожалению .. моей плохой Мысль sperating в приложении JS от маршрутизации с помощью IIFE, но забыл Теперь я обновил свой ответ и код плунжера. Cheers – Kalyan

Спасибо, я посмотрю. –

-1

<li><a ng-click="goTo('sports.football')">Football</a></li>

в контроллере

$scope.goTo = function(path){ 
$state.go(path) 
}

источник

2017-01-24 21:24:51

Если вы используете 'ui-router', вам не нужно будет реализовывать' ng-click' и функцию в контроллере. – MannfromReno

Да, вы правы, но для решения этой проблемы я предложил другой способ: –

@MannfromReno. Да, было бы легко, если бы я мог сделать это без ng-click и контроллера. Было бы здорово, если бы я мог перевернуть что-то в моей .state-части части html. –

Это проблема вложенных представлений. Если вы явно настроите таргетинг на разные виды, вы можете его решить.

<ul> 
    <li><a ui-sref="home">Home</a></li> 
    <li><a ui-sref="sports">Sports</a></li> 
    <li><a ui-sref="country">Country</a></li> 
</ul> 
<div ui-view></div> <!-- your sports.html plugs in here -->

В sports.html:

<ul> 
    <li><a ui-sref="sports.football">Football</a></li> 
    <li><a ui-sref="sports.weightlifting">Weightlifting</a></li> 
    <li><a ui-sref="sports.swimming">Swimming</a></li> 
</ul> 
<div ui-view></div> <!-- your [sportName].html plugs in here -->

Так что в вашем app.js, вы просто должны добавить некоторую Params относительно вложенного представления в sport.html, как это:

$stateProvider 
    .state('home', { 
     url: '/', 
     templateUrl: 'index.html'  
    }) 
    .state('sports', { 
     url: '/sports', 
     templateUrl: 'sports.html'  
    })  
    .state('country', { 
     url: '/country', 
     templateUrl: 'country.html'  
    }) 
    .state('sports.football', { 
     url: '/football', 
     // Relatively targets the unnamed view in this state's parent state, 'sports'. 
     // <div ui-view/> within sports.html 
     views: { 
     "": { 
      templateUrl: 'sports/football.html' 
     } 
     }  
    }) 
    .state('sports.weightlifting', { 
     url: '/weightlifting', 
     // Relatively targets the unnamed view in this state's parent state, 'sports'. 
     // <div ui-view/> within sports.html 
     views: { 
     "": { 
      templateUrl: 'sports/weightlifting.html' 
     } 
     } 
    }) 
    .state('sports.swimming', { 
     url: '/swimming', 
     // Relatively targets the unnamed view in this state's parent state, 'sports'. 
     // <div ui-view/> within sports.html 
     views: { 
     "": { 
      templateUrl: 'sports/swimming.html' 
     } 
     } 
    });

Если вы хотите получить более подробную информацию, вы можете прочитать этот документ: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-views

источник

2017-01-24 21:52:58

Кажется хорошей стратегией. Итак, в первом я должен сделать

и второй один три вида,

–

Если вы хотите назвать все представления, вам нужно добавить дополнительные параметры в конфигурацию $ stateProvider. Мое решение позволяет избежать этого. Я беру пример состояния плавания. Государство _ ** sport.swimming ** _ явно рассматривается как ребенок государства _ ** спорт ** _. Таким образом, в первом '', _sports.html_ (родительское состояние) подключается, а во втором '', _sports/swimming.html_ (дочернее состояние) подключается. –

Хорошо. Я попробую. Спасибо. –

Как использовать ui-sref в вложенном Угловом UI-маршрутизаторе?

ответ

Смежные вопросы