Question

我正在尝试创建一个可以动态地将模板内容添加到DOM中的指令。就像angular-datePicker一样。

我希望有一个像属性指令这样的指令。我会用它作为按钮的例子。单击按钮时，将显示表单。从技术上讲，我正在考虑使用链接函数，将回调绑定到元素onClick事件，并使用element.insertAfter方法在该回调中添加模板内容。

问题是，我无法访问templateURL加载的模板。第二个问题是属性指令的默认行为 - 它会自动将模板附加为元素的子元素。有没有办法如何禁用它？

Answer 1

听起来你想要更多的自定义行为，这在你的指令中很容易编写脚本。

基本步骤：

使用$ http服务
compile模板 - 引用范围

将模板插入到DOM中的任何位置

angular.module('myModule').directive('myDirective', function ($http, $compile) {
    var directive = {};

    directive.restrict = 'A';
    directive.link = function (scope, elem, attr) {
        var templateString = '';

        $http.get('[ path to template ]').then(function (response) {
            templateString = response.data;

            var compiledHtml = $compile(templateString)(scope); // compile with scope variables

            element.append(compiledHtml); // change this around to insert your element into the DOM
        });

    };

    return directive;
});

AngularJS指令使用templateURL加载的模板

1 个答案: