Динамическое изменение содержимого div с помощью анкерных меток angular

У меня возникла проблема с загрузкой динамического представления с помощью Angularjs в тегах привязки. Кстати, я не могу использовать ng-view, так как ng-view можно использовать только один раз в шаблоне. Поэтому я думаю об использовании ng-src, но в образце docs используется тег элемента select и выбор его значений для контроллеров. Я хочу, когда я нажму ссылку, скажу, что View1, содержимое моего div изменится. Я объясню дальше.Динамическое изменение содержимого div с помощью анкерных меток angular

Говорят, у меня есть это 3 якоря теги

<li><a href="#/view1">View1</a></li> 
<li><a href="#/view2">View2</a></li> 
<li><a href="#/view3">View3</a></li>

Перед

<div data-ng-include="" data-ng-src="default.html"></div>

Теперь, когда я нажимаю #/view1

//the ng-src of the html will change depending on the link clicked 
<div data-ng-include="" data-ng-src="view1.html"></div>

источник

2013-08-14 Wondering Coder

'нг-view' делает то же самое. Прочтите документацию по ** $ route ** и ** $ routeProvider **. – AlwaysALearner

@Codezilla, я больше не могу использовать ng-view, так как я уже использовал его в своих других частичных представлениях. Я думаю, что ng-view можно использовать только один раз для каждого шаблона. правильно? –

'ng-src' обычно присваивается тегу' img'. Вы ищете 'ng-include'? –

Возможно, вы пытаетесь сделать что-то, как показано ниже:

HTML:

<!-- Dont use # in the hrefs to stop the template from reloading --> 
<li><a href="" ng-click="selectedTemplate.path = 'view1.html'">View1</a></li> 
<li><a href="" ng-click="selectedTemplate.path = 'view2.html'">View2</a></li> 
<li><a href="" ng-click="selectedTemplate.path = 'view3.html'">View3</a></li> 

<div data-ng-include="selectedTemplate.path"></div>

JS:

$scope.selectedTemplate = { 
    "path":"view1.html" 
};

источник

2013-08-14 09:44:21 AlwaysALearner

Даже не нужно иметь 'JS', если вы не хотите контроллера. «SelectedTemplate.path» добавит текущую область. Http: // jsfiddle.net/davintryon/sL7Lm/ –

@DavinTryon Я думаю, что JS важен в том случае, если вы будете иметь все 'li' в ng-repeat или что-то, что создаст другую область. – AlwaysALearner

Правда, просто комментарий, что он будет работать без него для простых случаев. –

нг-вид основной вид любого углового приложения, и зависит от изменения маршрута. Таким образом, все теги привязки будут влиять только на шаблон ng-view.

Чтобы загрузить другие частичные виды на основе основного ng-view, ng-include - это правильный путь, как вы уже упоминали.

Чтобы загрузить представление, основанное на основном представлении (представление показано в ng-view), вам нужно написать логику отображения, которая в зависимости от основного представления должна загружать другие частичные (элементы ng-include для страницы).

Таким образом, ваш парциальное становится как

<div data-ng-include='templateNameVariable'></div>

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

Вы можете посмотреть событие $route$routeChangeSuccess и изменить templateNameVariable на основе активного маршрута (отсюда и представление).

Так что следует контроллер из стороны НГ ракурса директива, которая будет дирижировать это, и вы могли бы сделать

$scope.$on('$routeChangeSuccess',function(event,current,previous) { 
    //Change the templateNameVariable to point to correct template here, based on current route. 
});

источник

2013-08-14 09:49:12 Chandermani

Динамическое изменение содержимого div с помощью анкерных меток angular

ответ

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