Question

我在输入html元素上调用了以下指令。由于这个原因，模板不能像往常那样传播，因为它们将新的元素包装在输入标记中，输入标记除了是错误的HTML之外，还将其隐藏在浏览器的视图中。

return {
    restrict: 'A',
    scope: {
        input: '=ngModel'
    },
    link: function (scope, element) {
        var typeAheadHtml = angular.element('' +
            '<div>' +
                '{{input}}' +
            '</div>' +
        '');
        element.after($compile(typeAheadHtml)(scope));
    }
};

上面的工作很好，暂时，因为typeAheadHtml只是一个原型来证明这是有效的。有没有办法保持我对AngularJS非常喜爱的关注点的分离，但保持element.after的功能。有没有办法让typeAheadHtml成为常规的html文件？

ANSWER

感谢DonJuwe对此的帮助。保持相同行为但保持关注点分离的正确方法如下：

link: function (scope, element) {
        $http.get('bawwf/templates/type-ahead-directive.html', {cache: $templateCache})
            .success(function(html) {
                element.after($compile(html)(scope));
            });
    }

以上内容从$templateCache的文件内容中获取数据。像以前一样使用$compile提供程序从那时起就可以正常工作。

Answer 1

你可以使你的指令成为一个元素指令（restrict: 'E'），转换为带有typeahead的input - 元素，将所有属性传递给input - 元素。这样你的DOM就会保持一个清晰的结构，你的指令只会在自己的范围内修改DOM：

<typeahead type="text" placeholder="Enter your name..."></typeahead>

Answer 2

使用templateUrl: 'myTemplate.html'添加模板。然后，追加获取hmtl并将其附加到element：

$http.get(templateUrl, {cache: $templateCache}).success(function(html) {  
    element.append(html); 
}

更多信息：API Docs

Angular.element.after - 有没有办法使它更干净？

2 个答案: