angularjs bind appended html to controller

Question

Suppose initial html code is:

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

</div>

After the page is loaded, it makes some ajax request and appends new html

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

My controller

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

Since the newly created DOM element does not inherit the $scope given to its compiled template. How can i bind the dom element to the controller?

Szabolcs Dézsi · Accepted Answer · 2016-01-30 21:21:39Z

1

The $compile service can do just what you need.

Snippet:

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.: The resulting HTML will update properly. You can test it by injecting $timeout and adding the following piece of code:

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

edited Jan 30, 2016 at 21:21

answered Jan 30, 2016 at 21:11

Szabolcs Dézsi

8,84323 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Vaibhav Chiruguri Over a year ago

If i change $scope.data , Will it update in appended html?

Szabolcs Dézsi Over a year ago

As you can see, $scope.data is changed after being appended in the snippet and it shows up properly in the resulting HTML. Updated the answer.

Vaibhav Chiruguri Over a year ago

will it make a difference if i dont use append fucntion and just extract html from compiled dom element like this content[0].outerHTML and use this html to append later.

Szabolcs Dézsi Over a year ago

The way you're adding the value returned by the link function (content in this specific example) to the DOM doesn't matter as far as I know. I just used the jQuery append function with a HTML string, because that was the first thing that came to mind.

Vaibhav Chiruguri Over a year ago

jsfiddle i have made a fiddle. why ng-click is not binding to the controller scope?

|

Nijeesh · Accepted Answer · 2016-01-30 21:09:10Z

0

You should use $compile to link the template and scope

answered Jan 30, 2016 at 21:09

Nijeesh

8477 silver badges11 bronze badges

Collectives™ on Stack Overflow

angularjs bind appended html to controller

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related