javascript - 在我的例子中如何将 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

在点击事件中创建一个类似 <div ng-include="foo.html"></div> 的元素并将其传递给 angular.element。然后将其附加到 DOM。添加后，使用注入(inject)的 $compile 服务。 $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);
                        }
                    );

                })
            }
        };
    }
);