How to bind an AngularJS controller to dynamically added HTML?

by

I’ve faced the same issue, here’s what I came up with :

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

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

and calling setCnt() function will inject and compile the html, and it will be linked to the 2nd controller:

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";
});

here’s an example to test this : https://refork.codicode.com/x4bc

hope this helps.

More Related Contents:

  1. How do I bind to list of checkbox values with AngularJS?
  2. Why are Callbacks from Promise `.then` Methods an Anti-Pattern
  3. How to display length of filtered ng-repeat data
  4. How to dynamically change header based on AngularJS partial view?
  5. How to handle anchor hash linking in AngularJS
  6. AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https
  7. What’s the recommended way to extend AngularJS controllers?
  8. Losing scope when using ng-include
  9. SyntaxError: Unexpected token o in JSON at position 1
  10. How to get the url parameters using AngularJS
  11. firebase.database is not a function
  12. angularjs to output plain text instead of html
  13. How to access object property with invalid characters
  14. angularjs: allows only numbers to be typed into a text box
  15. Can you pass parameters to an AngularJS controller on creation?
  16. How do I use Bluebird with Angular?
  17. How to implement history.back() in angular.js
  18. Global Ajax error handler with AngularJS
  19. Angular JS custom delimiter
  20. AngularJS How to dynamically add HTML and bind to controller
  21. Access index of the parent ng-repeat from child ng-repeat
  22. Pass variables to AngularJS controller, best practice?
  23. HTTP request from Angular sent as OPTIONS instead of POST
  24. Required attribute Not working with File input in Angular Js
  25. Angular UI-Router $urlRouterProvider .when not working *anymore*
  26. How to use HTTP.GET in AngularJS correctly? In specific, for an external API call?
  27. How to achieve that “ui-sref” be conditionally executed?
  28. Ionic Framework: $scope is undefined in simple alert
  29. AngularJS ng-click fires twice
  30. Decode HTML entity in Angular JS

Leave a Comment