Angular.element.after - 有没有办法让它更清洁？

我有一个输入HTML元素上调用下面的指令。因为这个原因，模板不能像往常一样传播，因为它们的新元素将被包裹在一个输入标签中，除了是错误的HTML之外，它也会将其从浏览器的视图中隐藏起来。Angular.element.after - 有没有办法让它更清洁？

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

上述工作只是罚款，现在，becase的的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提供者从那时起工作得很好。

来源

2015-10-13 Aleski

你可以使用'把你的* HTML *到一个专门的文件templateUrl：“myTemplate.html''（HTTPS ：//docs.angularjs.org/guide/directive）。尽管如此，我认为没有更好的方法将模板附加到你的'element'中。 – DonJuwe

@DonJuwe如果我要将'typeAheadHtml'粘贴到单独的文件中，我是否仍然可以包含它，然后对其执行'element.after'？像'element.after（$ compile（urlToHtml）（scope））;'？ – Aleski

是的，这是可能的，但你可能需要这样做：'$ http.get（templateUrl，{cache：$ templateCache}）。success（function（html）{element.append（html）;}' – DonJuwe

包括：通过使用templateUrl: 'myTemplate.html'您的模板。之后，追加获得HMTL，并追加到element：

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

的更多信息：API Docs

来源

2015-10-14 07:51:48 DonJuwe

再次感谢，很好的答案。 – Aleski

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

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

来源

2015-10-13 11:09:41 LionC

我会，但我们支持旧版浏览器，所以我们必须有'A'的'restrict'：< – Aleski

@Aleski所以你支持IE8？有一个解决方法在IE8中使用元素指令，所以你可以使用它。但是，请记住，微软将放弃对所有IE版本的支持<11 enxt year – LionC

工作围绕着一个痛苦吗？在你的解决方案中，指令是否只有一个输入在视图里面然后会针对该输入的输入提供指令？ – Aleski

Angular.element.after - 有没有办法让它更清洁？

回答

相关问题