AngularJS controller not working

Question

I have AngularJS v1.2.19. I try use in my project

in body tag I wrote

<body ng-app="commentApp">

in page for calling controller I use

<div ng-controller="CommentLstCtrl">
    @{ Html.RenderPartial("Partial/CommentList", @Url.Action("Comments", "News")); }
    @{ Html.RenderPartial("Partial/CommentForm"); }
</div>

In js file I wrote

$(document).ready(function () {
    var url = $("#comments").attr("data-source");
    var id = $(".news-post").attr("data-id");
    var app = angular.module('commentApp', []);

    $.ajax({
        url: url,
        data: { newsId: id },
        type: "POST",
        dataType: "json",
        success: function (data) {


            app.controller("CommentLstCtrl", function ($scope) {
                $scope.comments = [
                    {
                        'text': 'Fast just got faster with Nexus S.'
                    },
                    {
                        'text': 'The Next, Next Generation tablet.'
                    },
                    {
                        'text': 'The Next, Next Generation tablet.'
                    }
                ];
            });
        }
    });
});

But code not working. When I debug this code, I saw that not come in body controller. And I can't understand why?

why are you wrapping the angular app using jquery in the first place? — pedrommuller
– pedrommuller, Commented Jul 14, 2014 at 14:32
this approach is so wrong...you really need to go through this thoroughly how-do-i-think-in-angularjs-if-i-have-a-jquery-background — charlietfl
– charlietfl, Commented Jul 14, 2014 at 14:38

vittore · Accepted Answer · 2014-07-14 14:36:28Z

1

1) Move

app.controller("CommentLstCtrl", function ($scope) {
            $scope.comments = [
                { 'text': 'Fast just got faster with Nexus S.' },
                { 'text': 'The Next, Next Generation tablet.'  },
                {  'text': 'The Next, Next Generation tablet.' }
            ];
});

outside of ajax call.

2) Use angular.bootstrap(document.querySelector('body'), ['commentApp']) to start application once ajax call succeeds

3) Show rendered content of your partial views. It is happening on the server side, not in the browser.

answered Jul 14, 2014 at 14:36

vittore

17.6k6 gold badges46 silver badges84 bronze badges

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

Collectives™ on Stack Overflow

AngularJS controller not working

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related