Change controllers variable in angular

Question

angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}
];
});

function abc(){
 $.ajax({url: "demo_test.txt", success: function(result){
     $scope.names = result; // here
 }});
}

I want to change the content of scope.names by result(it will be in json format) and then render the contents through angular.

And i want to clarify that i am bound to use get request from inside a function, so cant use $http of angular

Don't use $.ajax, use $http

harishr
– harishr

2015-06-05 16:45:15 +00:00
Commented Jun 5, 2015 at 16:45 — harishr
– harishr, Commented Jun 5, 2015 at 16:45
@entre Cant use $http

Sahil Jain
– Sahil Jain

2015-06-05 16:46:37 +00:00
Commented Jun 5, 2015 at 16:46 — Sahil Jain
– Sahil Jain, Commented Jun 5, 2015 at 16:46
This might help.

Zee
– Zee

2015-06-05 16:50:06 +00:00
Commented Jun 5, 2015 at 16:50 — Zee
– Zee, Commented Jun 5, 2015 at 16:50
What's the reason you can't use $http

harishr
– harishr

2015-06-05 16:51:23 +00:00
Commented Jun 5, 2015 at 16:51 — harishr
– harishr, Commented Jun 5, 2015 at 16:51
@SahilJain could you look at mine answer

Pankaj Parkar
– Pankaj Parkar

2015-06-05 17:00:58 +00:00
Commented Jun 5, 2015 at 17:00 — Pankaj Parkar
– Pankaj Parkar, Commented Jun 5, 2015 at 17:00

ShankarSangoli · Accepted Answer · 2015-06-05 16:57:25Z

1

Use $http instead of ajax because $http takes care of running digest cycle which takes care of 2 way binding.

function abc(){
  $http.get("demo_test.txt")
  .then(function(result){
     $scope.names = result;
  });
}

If for whatever reason you cannot use $http then you have to call $scope.$apply method to set the scoped values because it internally runs the digest cycle.

function abc(){
 $.ajax({
    url: "demo_test.txt", 
    success: function(result){
      $scope.$apply(function () {
         $scope.names = result;
      });
    }
 });
}

If you have abc method outside of your controller then you will have to get the controller scope as shown below which however is not a recommended by angular.

function abc(){
 var $scope = angular.element('[ng-controller=namesCtrl]').scope();
 $.ajax({
    url: "demo_test.txt", 
    success: function(result){
      $scope.$apply(function () {
         $scope.names = result;
      });
    }
 });
}

edited Jun 5, 2015 at 16:57

answered Jun 5, 2015 at 16:46

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

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

8 Comments

Zee Over a year ago

And how does abc knows about $scope?

ShankarSangoli Over a year ago

OP is already accessing $scope inside abc so I assume that it is in a closure.

ShankarSangoli Over a year ago

@OP - how are you calling abc method?

Zee Over a year ago

I am sure what OP meant by $scope.names = result; // here is how will he access the scope outside the controller.

Pankaj Parkar Over a year ago

@ShankarSangoli Good copy paste.. :p I already have angular.element('[ng-controller=namesCtrl]').scope() thing in my answer..

|

Pankaj Parkar · Accepted Answer · 2015-06-05 16:55:35Z

0

I understand you don't have access to the scope. You need to access scope in hacky way by using angular.element('[ng-controller=namesCtrl]').scope() then you would have actual control over scope, but the variable changes in a scope wouldn't run digest cycle, You need to run it manually by using $apply() on that scope.

Code

function abc(){
 $.ajax({url: "demo_test.txt", success: function(result){
    var scope = angular.element('[ng-controller=namesCtrl]').scope()
    scope.names = result; // here
    if(!scope.$$phase)
      scope.$apply(); //this will make available names in namesCtrl scope.
 }});
}

edited Jun 5, 2015 at 16:55

answered Jun 5, 2015 at 16:50

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Comments

swatkins · Accepted Answer · 2015-06-05 16:47:46Z

0

You need something to let Angular know that it needs to watch for that change. The Angular way of doing this is with $http, but you can also use $scope.$watch.

answered Jun 5, 2015 at 16:47

swatkins

13.6k4 gold badges50 silver badges79 bronze badges

1 Comment

Sahil Jain Over a year ago

Actually, i am a newbie to angular. So it wud be helpful if you can provide me a snippet

Collectives™ on Stack Overflow

Change controllers variable in angular

3 Answers 3

8 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related