Question

当我写这样的时候，有角度的作品：

<html ng-app="mptmanager" class="ng-scope">
     <body>
         <input ng-model = "test" /><br />
         {{test}}
     </body>
 </html>
 <script src="js/angular.min.js"></script>
 <script src="angular/angularModules.js"></script>

但是当我运行这样的JS代码时：

var temp = document.createElement('div');
temp.innerHTML = '<input ng-model = "test2"><br />{{test2}}';
document.body.appendChild(temp);

angular对新元素没有影响，所以我只能在我的页面上看到“{{test2}}”...

当我尝试使用JS添加或更改页面上的某些元素时，如何进行角度工作？

Answer 1

使用Angular时，不应该在指令之外进行DOM操作。为了完成，我会告诉你如何做这项工作。只需注入$compile服务并使用范围编译新标记。

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $compile) {
  $scope.foo = 'Default value';

  var elem = document.createElement('div');
  elem.innerHTML = '<input ng-model="foo">{{foo}}';
  document.body.appendChild(elem);
  $compile(elem)($scope);
});

以下是使用指令的正确方法：

<div my-directive></div>
<div my-directive2></div>

<强> JavaScript的：

app.directive('myDirective', function() {
  return {
    template: '<input ng-model="foo">{{foo}}'
  };
});

app.directive('myDirective2', function() {
  return {
    compile: function(element) {
      element.html('<input ng-model="foo">{{foo}}');
    }
  };
});

在您的指令中，如果您使用link函数，该函数可以访问scope，则必须手动$compile标记，如上所示，但要小心避免无限循环。你通常会这样做：$compile(element.contents())(scope);如果你自己编译元素，你会创建一个无限循环。

<强> Live demos (click).

Answer 2

正如dskh简要提到的，directives用于在Angular中执行此类操作。

这里的问题是Angular 不知道关于新元素的，因为添加它的例程生活在Angular范围之外。您可以手动拨打$scope.$apply()，但我不会考虑这种最佳做法。

使用“appendChild（）”添加新元素后，数据绑定不起作用

2 个答案: