堆棧內存溢出
  簡體   English   中英

如何將 AngularJS 控制器綁定到動態添加的 HTML？

[英]How to bind an AngularJS controller to dynamically added HTML?

 原文  2013-12-18 06:59:18  5   6    javascript/ angularjs

問題描述

對於這種情況，我有一個 HTML 頁面，其中包含一些 AngularJS 指令、控制器等。

像這樣的東西：

<html>
<body>
  <div ng-controller="myCtrl">
     <ul><li ng-repeat="item in items">{{item.name}}</li></ul>
  </div>
  <div class="placeholder">
     ...new HTML here...
  </div>
</body>
</html>

請注意，頁面上沒有ng-app指令。 我不依賴於自動引導，而是使用手動引導方法。

angular.bootstrap(document, ['myApp']);

首先，我創建將引導到文檔的模塊。 然后，當加載動態確定的依賴項列表時，我會附加一些服務、控制器等。一旦一切准備就緒，我就會調用 bootstrap 方法。

這一切都很好，直到 AngularJS 之外的 JavaScript 在...new HTML here...位置附加到 DOM。 新的 HTML 不是由 AngularJS 處理的。

我的理解是你需要調用$scope.$apply()或$digest()或其他東西來讓 AngularJS 識別新的 HTML。 但是，在我的示例中，傳入的新 HTML 周圍沒有控制器。傳入的 HTML 可能如下所示：

  <div ng-controller="myOtherCtrl">
     <h2>{{model.title}}</h2>
  </div>

換句話說，它依賴於 app 模塊中的不同控制器。

  • 我無法再次調用angular.bootstrap方法，因為頁面已經綁定。
  • 我不能從控制器內部調用$scope.$apply ，因為整點是控制器代碼沒有被調用。
  • 我沒有看到獲取對控制器的引用以重新應用或刷新它的方法。

我已經閱讀了Ifeanyi Isitor 延遲加載帖子和Ben Nadel 帖子，但它們似乎沒有解決在現有控制器上下文之外加載的 HTML。

我不能選擇使用 AngularJS 指令來處理 DOM 操作。 它是架構的一個單獨部分，它使用 ExtJS 作為注入新 DOM 元素的框架。 這意味着我不能使用 ngInclude 例如。

看起來我可以只調用angular.module('myApp').$refresh(); 或.$apply()但這不是一個選項。 我錯過了什么？

6 個解決方案

解決方案1
 10  2015-03-25 21:19:07

我遇到了同樣的問題，這是我想出的：

<div id="mController" ng-controller="mainController">
</div>

<div id="ee">
  2nd controller's view should be rendred here
</div>

並調用 setCnt() 函數將注入並編譯 html，並將其鏈接到第二個控制器：

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

function setCnt() {
  // Injecting the view's html
  var e1 = angular.element(document.getElementById("ee"));
  e1.html('<div ng-controller="ctl2">my name: {{name}}</div>');
  
  // Compile controller 2 html
  var mController = angular.element(document.getElementById("mController"));
  mController.scope().activateView(e1);
}

app.controller("mainController", function($scope, $compile) {
  $scope.name = "this is name 1";

  $scope.activateView = function(ele) {
    $compile(ele.contents())($scope);
    $scope.$apply();
  };
});

app.controller("ctl2", function($scope) {
  $scope.name = "this is name 2";
});

這是一個測試這個的例子： https : //snippet.run/x4bc

希望這可以幫助。

解決方案2
 2  2015-04-20 19:26:04

讓我們拿一個小模板

 var  template = '<div ng-controller = "someController">';
      template += '<All html you want to add>'; 
      template += '</div>';

現在如果你想添加這個模板，你必須做以下兩件事：

1）通過$controller實例化你的$controller

2）編譯你的模板。

//this creates a new scope
var $scope = $rootScope.$new();  
//Controller initialize with $scope
$controller('someController',{$scope,$scope});   
var templateEl = angular.element(template);
//Now compile the template with scope $scope
$compile(templateEl)($scope);
angular.element('body').append(templateEL);

解決方案3
 1  2013-12-18 07:43:51

您可能想使用$compile服務。 這就是 angular 首先要做的事情。

還有本指南： http : //docs.angularjs.org/guide/compiler

解決方案4
 1  2014-09-17 20:45:46

我有同樣的問題。 這對我有用： https : //docs.angularjs.org/api/ng/function/angular.injector

解決方案5
 0  2013-12-18 07:20:39

我認為ng-include可能會幫助您，它將部分頁面加載到元素中，並像網頁的任何其他部分一樣編譯和處理它。

如果此元素是您的 Web 應用程序的主視圖，並且您希望根據 url 將不同的“屏幕”加載到其中，則ng-view可能會派上用場。

解決方案6
 0  2016-06-13 20:32:51

我遵循了這個過程，它對我有用：

// Some variables
var $controllerElement = angular.element('css-selector-to-the-controller-element');
var $appElement = angular.element('css-selector-to-ng-app-element');

// compiling and applying / digesting the scope.
$appElement.injector().invoke(function($compile) {
    var scope = $controllerElement.scope();
    $compile($controllerElement)(scope);
    scope.$apply();
});

參考： Angular.injector

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 AngularJS如何動態添加HTML並綁定到控制器 如何創建html頁面模板並將控制器與AngularJS動態綁定到它？ 帶有MVC的AngularJS動態獲取HTML，附加到正文並綁定控制器 angularjs將附加的html綁定到控制器 如何在AngularJS中將控制器動態綁定到生成的HTML頁面？ AngularJS：使用控制器動態加載HTML AngularJS：如何使用ng-bind-html將事件綁定到動態生成的html 無法將angularjs控制器變量綁定到html頁面 如何在AngularJS中動態注入控制器 從HTML動態加載angularjs控制器
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM