CODEWITHSUNDEEP
jqueryhtmlangularjsdom
user3169724
user3169724

Reputation: 39

Angular.JS in dynamic JQuery

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

Upvotes: 1

Views: 213

Answers (1)

Alec Moore
Alec Moore

Reputation: 1175

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

Upvotes: 1

Related Questions