angularjs將附加的html綁定到控制器

Question

假設初始html代碼為：

<div id="first" ng-controller="IndexPageController">

</div>

頁面加載后，它將發出一些ajax請求並附加新的html

<div id="first" ng-controller="IndexPageController">
   <div id="appended">
      {{data}}
   </div>
</div>

我的控制器

MyApp.controller('IndexPageController', ['$scope', '$http',  function ($scope, $http) {
  $scope.data="something";
 });

由於新創建的DOM元素不會繼承賦予其已編譯模板的$ scope。 如何將dom元素綁定到控制器？

Answer 1

$compile服務可以滿足您的需求。

片段：

 var app = angular.module("app", []); app.controller("IndexPageController", function ($scope, $http, $compile, $timeout) { var htmlText = "<div id=\\"appended\\">" + "{{data}}" + "</div>"; var linkFn = $compile(htmlText); var content = linkFn($scope); $("#first").append(content); $scope.data = "This should change after 5 seconds..."; $timeout(function() { $scope.data = "Indeed, it is changed"; }, 5000) }); angular.bootstrap(document, ["app"]); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script> <div> <div id="first" ng-controller="IndexPageController"> </div> </div> 

PS .：生成的HTML將正確更新。 您可以通過注入$timeout並添加以下代碼來對其進行測試：

$timeout(function() {
    $scope.data = "Indeed, it is changed";
}, 5000)

Answer 2

您應該使用$ compile鏈接模板和范圍