How to make angular read jQuery inserted elements

Question

I am trying to use jQuery to insert a div and within that div thers angular content that needs to be rendered. but it doesnt get rendered when click on the button.

myVar = $("<div class="a"><p ng-repeat="banana in bananas">{{banana}}</p></div>");

$("button").click(function () {
   myVar.appendTo(".myOtherDiv");
});

appendTo works fine but instead of giving me a list of bananas i get {{bananas}}

Is there a way of making Angular the element when jQuery puts it on the DOM?

Avoid jQuey when you're using AngularJS. jQuery is absolutely useless in your example. Anyway, if this is **really** the last resort, you can use [$compile](http://docs.angularjs.org/api/ng.$compile). — Blackhole, Aug 07 '13 at 15:05
Can you create a fiddle for the same? As this information is not enough to figure out what needs to be done — Dhaval Marthak, Aug 07 '13 at 15:11
A general rule of thumb: if you think you need jquery, you're not doing it right with AngularJS. — Fourth, Aug 07 '13 at 15:34

score 5 · Accepted Answer · edited May 23 '17 at 10:31

You must absolutely avoid to use jQuery when you are using AngularJS. In your example, for instance, that is not necessary at all:

<div ng-app ng-controller="MyCtrl">
    <button ng-click="addLine()">Add a line</button>
    <div ng-repeat="line in lines">
        I'm a new line. {{foo}}
    </div>
</div>

function MyCtrl($scope) {
    $scope.foo = "I'm foo!";
    $scope.lines = [];

    $scope.addLine = function () {
        $scope.lines.push($scope.lines.length);
    };
}

Fiddle

You can read this question if you find (rightly) that create an array just to loop is too heavy.

As a last resort solution, and only in this case, you can use $compile (see the documentation).

How to make angular read jQuery inserted elements

1 Answers1