Угловой динамический элемент с шаблоном и контроллером

Question

Я не могу понять, как добавить динамический контент после нажатия на мой HTML с файлом шаблона и некоторым контроллером.

Я хочу что-то вроде:

element.click(function(){ 
    element2.html(templateUrl, controller); 
}); 

Угловая 1.5.8

Answer 1

вы можете создать директиву с контроллером и шаблон, скомпилировать его и чем добавить его в DOM.

Answer 2

Хотя вопрос не в том, чтобы очистить, я чувствую, что вы хотите сделать html динамически. Есть два решения для этого:

1. угловой маршрутизации: Это в основном используется, если вы хотите, чтобы перейти на другие страницы вашего приложения, но вы также хотите, чтобы приложение быть SPA (Single Application Page) , без перезагрузки страницы, вы можете использовать модуль ngRoute. Содержание для этого довольно легко доступно повсюду. Вы можете взглянуть на них.

2. пользовательские директивы: Вы можете попробовать написать директиву, которая будет оказывать HTML-на зависимости от того, событие, которое вы хотите:

   .directive("customTemplateLoad", function($http, $templateCache, $compile) { 
   return { 
       restrict: 'A', 
       link: function(scope, element, attr, controller){ 
       var template; 
       // Some logic to get template, perhaps pass it in the directive itself 
       var templatePath = '/templates/'+template; 
       $http.get(templatePath, { cache: $templateCache }).success(function(response) { 
        var contents = element.html(response).contents(); 
        $compile(contents)(scope); 
       }); 
       } 
   };})