javascript - 如何在 javascript 中插入带有 angularJS 属性的 HTML？

Question

我想尝试:

function test(){
   $('#somediv').html('<div ng-model="name">{{name}}</div>');
}

有什么办法可以做到这一点吗？

Answer 1

当你添加包含 Angular 内置指令的 html 时，你必须通过 $compile 重新编译它，以便让 Angular 识别。

引用下面的代码片段。

angular.module("app", [])
  .controller("myCtrl", function($scope, $compile) {
    $scope.name = 'test value';
    $scope.test = function() {
      var element = angular.element($('#somediv'));
      element.html('<div ng-model="name">{{name}}</div>');
      $compile(element)($scope);
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="app" ng-controller="myCtrl">
  <input type="text" ng-model="name">
  <button ng-click="test()">Add</button>
  <div id="somediv"></div>
</div>