Angular.JS in dynamic JQuery

Question

Again I... I have stuck. I need to use Angular.JS in my project, but I can't run Angular in dynamic generated tags.

    <h1>Your albums</h1><hr/>
    <div ng-controller="AlbumsController">
        <ul>
            <li ng-repeat="album in albums">
                {{album.name}}
                <p>{{album.desc}}</p>
            </li>
        </ul>
    </div>

That's block, which generated dynamically through JQuery.

<html ng-app="Application" class="no-js" lang="ru">

That's tag static, and it must init angular.

My dynamic block doesn't work. It returns: {{album.name}} {{album.desc}}, that's sign of not initialized Angular.JS :(

var Juster = angular.module('Juster', []); 
Juster.controller('AlbumsController', function ($scope) {    
    $.post("/index.php/profile_ctrl/myalbums", function(data){ 
        $scope.albums = data; 
    }) 
});

var Juster = angular.module('Juster', []); Juster.controller('AlbumsController', function ($scope) { $.post("/index.php/profile_ctrl/myalbums", function(data){ $scope.albums = data; }) }); So, html: <html ng-app="Juster" class="no-js" lang="ru"> — user3169724
– user3169724, Commented Jan 7, 2014 at 18:34
Angular can handle this. Drop the DOM creation with JQuery altogether, it'll only cause you problems. — Matt Burland
– Matt Burland, Commented Jan 7, 2014 at 18:36
If you are geneating and inserting those element outside of AngularJS context, you probably need to $compile it manually into Angular code. It would help to see more code (escpecially where/when/how are the new elements generated and inserted). — gkalpak
– gkalpak, Commented Jan 7, 2014 at 18:39
Take a look at the 2nd example on this page: docs.angularjs.org/api/angular.injector — gkalpak
– gkalpak, Commented Jan 7, 2014 at 18:45

Alec Moore · Accepted Answer · 2014-01-07 19:46:44Z

1

Matt is correct in saying that you need to let go of jQuery for the most part when using angular. It can cause some headaches when working with controllers and directives.

To use only angular in your example I would use the $http service like so:

Juster.controller('AlbumsController', function ($scope, $http) { 

    $http({method:'GET', url: '/index.php/profile_ctrl/myalbums'})
        .success(function(data, status, headers, config) {
           $scope.albums = data; 
        })
        .error(function(data, status, header, config) {
           // Handle error
        });
});

answered Jan 7, 2014 at 19:46

Alec Moore

1,1752 gold badges10 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

Angular.JS in dynamic JQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related