Question

我正在尝试使用以下代码编译静态DOM

(function(angular) {
  var app = angular.module("directiveModule1",[]);
  app.controller('testController', ['$scope', function($scope){
    $scope.UserName = "afh";
  }]);
  app.directive("linkFuncDirective",['$compile', function($compile) {
return {
  link: function(scope, element, attrs,controller) {
    var markUp = "<input type = 'text' ng-model ='UserName'/>{{UserName}}</br>";
    var linkFunc = $compile(markUp);
    var content = linkFunc(scope);
    angular.element(element).html(content);
    //angular.element(element).html($compile(markUp)(scope));
  }
};
 }]);
})(window.angular);

我的html在

之下

 <html>

<head>

  <script data-require="angular.js@*" data-semver="1.4.0-beta.5"        src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
   <script src="directiveWithLinkFunction.js"></script>

</head>

<body ng-App="directiveModule1">

  <div ng-controller="testController">
    <div link-func-directive></div>
  </div>

</body>

</html>

我得到以下o / p

[[object HTMLInputElement], [object HTMLSpanElement], [object HTMLBRElement]]

试图理解代码中写错的内容，非常感谢任何帮助

Answer 1

html背后的原因是[[object HTMLInputElement], [object HTMLSpanElement], [object HTMLBRElement]]在视图上是，你已经使用$compile服务编译了一行html，它在下面作为编译的DOM返回

<input type="text" ng-model="UserName">
<span class="ng-binding ng-scope"></span>
<br class="ng-scope">

所以基本上它有3个元素，第一个是输入元素，第二个是span＆amp;第3个是br中断标记。因此，当您尝试使用.html方法将其作为HTML添加到页面时，jQLite会在内部获取该对象并应用.toString()方法来确保它应该接受该字符串。这就是为什么你在输出中得到[Object...]的原因。

基本上你的问题是你将编译的角度DOM html内容分配给指令元素html，这是没有意义的。

它应该是.append函数而不是.html，因为角度编译的DOM将被注入将启用绑定。

element.append(content); //would append the DOM with angular compiled DOM.

Answer 2

为什么要首先编译它？你可以使用一个简单的模板。

Answer 3

你的代码有点乱。先尝试清理。

为您的指令提供限制属性
如果您没有必填字段，则表示您不需要controller参数
为什么不简单地使用模板作为指令

angular中的$ compile服务返回一个数组

3 个答案: