Как добавить html в Angular в моем случае?

Question

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

angular.module('myApp').directive('testProduct', function() { 
     return { 
      restrict: 'A', 
      link: function(scope, elem) { 
       var html; 
       html = '<div>… a lot of html tags and contents………….'; 
       // a lot of html tags 
       //I want to link to a html file like product.html 
       //instead of defining here. 
       elem.bind('click', function() { 
        $('.product').remove(); 
        elem.closest('div').append(html); 
       }) 
      } 
     }; 
    } 
); 

В любом случае, я могу связать html с другим файлом? templateUrl:product.html? Я не могу использовать его здесь, потому что я хочу только добавить этот html, когда пользователь нажимает кнопку.

Большое спасибо!

Answer 1

В событии click создайте элемент, например <div ng-include="foo.html"></div>, и передайте его в угловой элемент. Затем добавьте его в DOM. После добавления используйте внедренную службу компиляции. $compile(dynamicIncludeElement)(scope).

angular.module('myApp').directive('testProduct', function($compile) { 
     return { 
      restrict: 'A', 
      link: function(scope, elem) { 
       var html = angular.element('<div ng-include="'product.html'"></div>'); 

       elem.bind('click', function() { 
        var compiledHtml = $compile(html)(scope); 
        elem.append(compiledHtml); 
       }) 
      } 
     }; 
    } 
); 

Другой альтернативой было бы получить HTML самостоятельно и скомпилировать его.

angular.module('myApp').directive('testProduct', function($http, $compile) { 
     return { 
      restrict: 'A', 
      link: function(scope, elem) { 

       elem.bind('click', function() { 

        $http.get('product.html') 
         .success(function(data) { 
          var compiledHtml = $compile(data)(scope); 
          elem.append(compiledHtml); 
         } 
        ); 

       }) 
      } 
     }; 
    } 
);