Binding issue in AngularJS

Question

I am trying to bind from a http get request. The http get is returning true or false. I have tested the get and it is returning properly. When I run the code below, it shows the alert(1111) properly also. However, when I'm trying to change the button text, nothing appears! I have tried everything that I know to do. Any advice would be helpful.

Post.js

myApp.controller('FollowController', ['$scope', '$http', function($scope, $http) {

    var status = "";

        $http.get('/Home/CheckFollower?idToFollow=' + profileId + '&followerId=' + currentUserId).
            success(function(data) {
                //check if it is a follower

                if (data) {
                    // Not following - Show unfollow
                    alert("1111");
                    $scope.statusMessage = data;


                } else {
                    //Following - show Follow

                    $scope.statusMessage = data;
                }

            })
            .error(function(data, status) {
                console.log(data);
            });

}]);

Html

   <span style="float: right" ng-controller="FollowController as follow">
                        <button type=" button" class="btn btn-success" onclick="location.href='@Url.Action("Follow", "Home", new { idToFollow = ViewBag.ProfileId, followerId = User.Identity.GetUserId() })'">
                            {{ follow.statusMessage }}</button>

                        </span>

Pankaj Parkar · Accepted Answer · 2015-06-19T18:41:55.507

2

You should bind the variables to this instead of $scope as you are using controllerAs approach

Controller

myApp.controller('FollowController', ['$scope', '$http',
    function($scope, $http) {
        var status = "";
        var follow = this;
        $http.get('/Home/CheckFollower?idToFollow=' + profileId + '&followerId=' + currentUserId).
        success(function(data) {
          //check if it is a follower
          if (data) {
            // Not following - Show unfollow
            alert("1111");
            follow.statusMessage = data;
          } else {
            //Following - show Follow
            follow.statusMessage = data;
          }
        })
        .error(function(data, status) {
          console.log(data);
        });
    }
]);

edited Jun 19 '15 at 18:41

answered Jun 19 '15 at 18:38

Pankaj Parkar

134,766
23
234
299

1

AH! Thank you! Worked! – Rupert Jun 19 '15 at 18:41
@JeremyLewallen Glad to help you ..THanks :) – Pankaj Parkar Jun 19 '15 at 18:42
Just curious, before this solution, I tried to create a function and use a return. However, it kept running the function over and over. Do you have any idea why it would do that? – Rupert Jun 19 '15 at 19:32
@JeremyLewallen I didn't get you on this point..about what function you are talking about? – Pankaj Parkar Jun 19 '15 at 19:35
I created a function called checkFollower(). It had the same logic as above, except it used return. WHen I called the function with angular binding {{ checkFollower() }} it stayed in an infinite loop. Just curious if you would know why that would happen – Rupert Jun 19 '15 at 20:04

Binding issue in AngularJS

1 Answers1