javascript - Angular $scope variables not updating in controller - Stack Overflow

admin管理员组

文章数量:1311674

My variables are not updating in the controller and I have no idea why.

In the view I have this code

<div ng-if="state_1">
    <input ng-model='amount'> {{amount}} <!-- this binds perfectly -->
    <button ng-click='submitForm()'>Submit</button>
</div>
<div ng-if="state_2">
    <input ng-model='txcode'> {{txcode}} <!-- this binds perfectly -->
    <button ng-click='submitCode()'>Submit</button>
</div>

In the controller:

angular.module('myapp')
   .controller('RecCtrl', function($scope, $state, $rootScope, $http) {
      $scope.submitForm = function(){
         console.log($scope.amount);    //returns undefined 
      }
   })

I followed this answer and worked around it by passing the amount into submitForm() from the view. But now I need to use a value from $rootScope but nothing shows. Nothing works in this controller except for that $scope.submitForm(). Every other controller is working fine.

If it will help, there are 2 states using the same controller and template like so:

//initiate payment tx 
    .state('rec', {
      url: '/receive',
      templateUrl: 'views/rec.html',
      controller: 'RecCtrl'
    })

    //claim payment tx 
    .state('claim', {
      url: '/claim',
      templateUrl: 'views/rec.html',
      controller: 'RecCtrl'
    })

I use the $state.current.name to separate the functions. But I have tried deleting the other one, it still didn't work. Other controllers are working fine.

My variables are not updating in the controller and I have no idea why.

In the view I have this code

<div ng-if="state_1">
    <input ng-model='amount'> {{amount}} <!-- this binds perfectly -->
    <button ng-click='submitForm()'>Submit</button>
</div>
<div ng-if="state_2">
    <input ng-model='txcode'> {{txcode}} <!-- this binds perfectly -->
    <button ng-click='submitCode()'>Submit</button>
</div>

In the controller:

angular.module('myapp')
   .controller('RecCtrl', function($scope, $state, $rootScope, $http) {
      $scope.submitForm = function(){
         console.log($scope.amount);    //returns undefined 
      }
   })

I followed this answer and worked around it by passing the amount into submitForm() from the view. But now I need to use a value from $rootScope but nothing shows. Nothing works in this controller except for that $scope.submitForm(). Every other controller is working fine.

If it will help, there are 2 states using the same controller and template like so:

//initiate payment tx 
    .state('rec', {
      url: '/receive',
      templateUrl: 'views/rec.html',
      controller: 'RecCtrl'
    })

    //claim payment tx 
    .state('claim', {
      url: '/claim',
      templateUrl: 'views/rec.html',
      controller: 'RecCtrl'
    })

I use the $state.current.name to separate the functions. But I have tried deleting the other one, it still didn't work. Other controllers are working fine.

• javascript
• angularjs

Share Improve this question Follow edited May 23, 2017 at 11:52 CommunityBot 111 silver badge asked Oct 8, 2016 at 12:01 iKeyiKey 42811 gold badge44 silver badges1616 bronze badges 4

• Shouldn't this $scope.submitForm(){} be $scope.submitForm = function(){}. – Ravi Teja Commented Oct 8, 2016 at 12:14
• @RaviTeja It was a typo. I have updated it, thank you. – iKey Commented Oct 8, 2016 at 12:20
• Do you have ng-if, ng-repeat, ng-include or other directives in your HTML file? I you can show your plete html it will help. – Ravi Teja Commented Oct 8, 2016 at 12:20
• Yeah, I have ng-if. That is how I separate the 2 states. I've update the code to show the rest of the html @RaviTeja – iKey Commented Oct 8, 2016 at 12:23

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

ng-if creates a new scope. So, you cannot directly use primitive values, use reference values.

If you use primitive values they will be local to ng-if scope. So, you cannot access them from your controller.

If you use reference value, ng-model checks if the value exists in ng-if scope, if it does not then it looks the value in parent scope which is RecCtrl scope in this case.

This link will help you to understand why you should use reference values.

angular.module('myapp')
   .controller('RecCtrl', function($scope, $state, $rootScope, $http) {
      // use a reference value
      $scope.details={};
      $scope.submitForm = function(){
         console.log($scope.details.amount);   
      }
   })

HTML

<input ng-model='details.amount'> {{details.amount}} 
<button ng-click='submitForm()'>Submit</button>

本文标签： javascriptAngular scope variables not updating in controllerStack Overflow