Угловые переменные $ scope, не обновляемые в контроллере

Question

Мои переменные не обновляются в контроллере, и я понятия не имею, почему.

По мнению у меня есть этот код

<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> 

В контроллере:

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. Но теперь мне нужно использовать значение из $rootScope но ничего не показывает. В этом контроллере ничего не работает, кроме $scope.submitForm(). Каждый другой контроллер работает нормально.

Если это поможет, есть 2 состояния, используя один и тот же контроллер и шаблон, как так:

//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' 
    }) 

Я использую $state.current.name для разделения функций. Но я попытался удалить другой, он все еще не работает. Другие контроллеры работают нормально.

Answer 1

ng-if создает новый объем. Таким образом, вы не можете напрямую использовать примитивные значения, используйте ссылочные значения.

Если вы используете примитивные значения, они будут локальными для области ng-if. Таким образом, вы не можете получить к ним доступ от своего контроллера.

Если используется эталонное значение, ng-model проверяет, существует ли значение в ng-if объеме, если это не то, что выглядит значение в родительской области, которая RecCtrl сфера в данном случае.

Этот link поможет вам понять, почему вы должны использовать ссылочные значения.

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>