带有模板和控制器的角动态元素

Question

I can't understand how to add dynamic content after click on to my HTML with a template file and some controller.

I want to something like:

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

Angular 1.5.8

Answer 1

Although the question is not to clear I feel what you want to do is to render an html dynamically. There are two solutions for this:

1. angular-routing : This is mostly used if you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application), with no page reloading, you can use the ngRoute module. The content for this is pretty readily available everywhere. You can have a look at them.

2. custom-directive : You can try to write a directive which would render the html on whichever event you want:

    .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); }); } };}) 

Answer 2

您可以使用控制器和模板创建指令，对其进行编译，然后将其添加到DOM。