Загрузите шаблон AngularJS внутри страницы, динамически

У меня есть страница, содержащая два контроллера: один, который управляет списком так называемых «приложений», а другой - для размещения нового углового шаблона в innerHTML своего элемента Div.Загрузите шаблон AngularJS внутри страницы, динамически

<div ng-controller="appList"></div> 
<div ng-controller="appPane"> Dynamic content should be loaded here! </div>

Я попытался с помощью стандартного {{выражения}} привязка, но они не работают с HTML, я также попробовал нг-Bind-HTML-небезопасная директива (Привязка innerhtml к тому из App запрос запроса), но в этом новом коде контроллеры не выполняются.

Проблема заключается в том, что, используя привязку, Angular не пересматривает содержимое рассматриваемого html, чтобы использовать его в качестве углового приложения. Любые идеи о том, как заставить его анализировать динамический контент?

источник

2012-07-03 Zoey

Являются ли отличительные приложения «Углеродные приложения» (у каждого есть объявление «ng-app»?) Или просто разные контроллеры/представления для одного и того же приложения? Если есть только разные контроллеры/просмотр, я бы использовал appList в качестве вашей навигации и настройки '$ routeProviders' (http://docs.angularjs.org/api/ng.$routeProvider) для управления различными представлениями. –

Вероятно, лучшее решение, чем тот, который я пытался, но я все еще новичок в Angular, поэтому я попробую. Благодарю. – Zoey

Посмотрите на модуль uiRouter (от проекта AngularUI). Он добавляет концепцию состояний, которые довольно похожи на маршруты, но с другими положительными героями, такими как способность их гнездовать. Например:

$stateProvider 
    .state('myState', { 
     url: '/mystate', 
     templateUrl: '...', 
     controller: 'MyCtrl' 
    }) 
    .state('myState.substate', { 
     url: '/{substate}', 
     templateUrl: '...', 
     controller: 'MySubCtrl' 
    });

MySubCtrl будет активироваться каждый раз, когда вы идете в /mystate/something и вы можете использовать это «что-то» в качестве параметра (см $stateParams). Вы можете вложить состояния в любое количество уровней.

источник

2014-02-04 00:49:03

Это звучит очень полезно! Будучи тем, что мой ответ был от раннего развития Углового, этого не существовало - другие не стесняются комментировать, если это не так, но я считаю, что теперь это правильный ответ. Принято. – Zoey

Я рад, что эти вещи (экосистема AngularJS) развиваются так, как они есть. –

Для записи я пробовал это решение в своих проектах, и это очень полезно. Есть несколько проблем, таких как навигация к несуществующим маршрутам, приводящие к ошибкам, но я уверен, что скрытые в документах с умеренной глубиной - это средство обнаружения, когда маршрут не существует, чтобы его можно было обработать. В качестве общего сценария я рекомендую это решение всем, кто пытается использовать маршруты, и я рекомендую пропустить официальный провайдер маршрута из Angular, так как он намного мощнее. – Zoey

Похоже, что служба компиляции $ при подаче элементов, которые вы хотите перекомпилировать вместе с вашей текущей областью, делает то, что я искал.

Пример из моего источника:

var appPane = $('#AppPane');//JQuery request for the app pane element. 
appPane.html(data);//The dynamically loaded data 
$compile(appPane.contents())($scope);//Tells Angular to recompile the contents of the app pane.

Это должно помочь любому испытывать мою проблему, я надеюсь.

источник

2012-07-03 20:43:20 Zoey

Посмотрите на $routes и ngView в angularjs.

Вот очень простой пример:

http://jsfiddle.net/pXpja/3/

источник

2012-07-21 14:11:42 bearfriend

Это «официальный» вариант, но в настоящее время он не работает в ситуациях, требующих многоуровневой структуры контроллеров, как в моей первоначальной проблеме. – Zoey

Загрузите шаблон AngularJS внутри страницы, динамически

ответ

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