Angular $ scope variable undefined

Question

Я поставлю этот вопрос, заявив, что $scope.$apply() не работает, когда я его вызываю внутри addToOrder(). Моя консоль выводит следующее сообщение об ошибке:

Error: [$rootScope:inprog] $apply already in progress 
http://errors.angularjs.org/1.2.25/$rootScope/inprog?p0=%24apply 

Что касается вопроса ядра, когда я пытаюсь установить количество моего item объекта перед отправкой его в мой массив порядка, он всегда возвращает неопределенной.

.controller('MenuItemCtrl', ['$scope', '$state', '$stateParams', '$localstorage', 'MenuItem', 
function($scope, $state, $stateParams, $localstorage, MenuItem) { 
    MenuItem.get($stateParams.menuItemId) 
    .success(function(data) { 
     $scope.menuItem = data; 
    }); 
    $scope.addToOrder = function() { 
     var item = { 
      name: $scope.menuItem.name, 
      id: $scope.menuItem.objectId, 
      qty: $scope.quantity, 
      price: $scope.menuItem.price, 
      ttlPrice: ($scope.menuItem.price) 
     } 
     $localstorage.order.push(item); 
    } 
}); 

Вот мой HTML:

<label class="item item-input col"> 
    <input type="number" ng-model="quantity" value="1"> 
</label> 
<div class="item col">{{quantity}}</div><!-- verify that $scope.quantity exists --> 
<button class="button button-full button-positive" ng-click="addToOrder()"> 
    Add to Cart 
</button> 

Почему $scope.quantity возвращение неопределенными даже если связывание данных происходит и т

ASIDE: $localstorage является модуль I определяется как обертка AngularJS для доступа к исходному объекту window.localStorage, если вам интересно.

EDIT: Вот мой файл app.js, где я определяю свои состояния. Ниже приведены соответствующие menu и menu-details состояния для справки ...

.state('tabs.menu', 
    { url: '/menu', 
    views: { 
     'tab-menu': { 
     controller: 'MenuCtrl', 
     templateUrl: 'views/menu.list.html' 
     } 
    } 
}) 
.state('tabs.menu-details', 
    { url: '/menu-details/:menuItemId', 
    views: { 
     'tab-menu': { 
     controller: 'MenuDetailCtrl', 
     templateUrl: 'views/menu.details.html', 
     resolve: { 
      menuItemId: ['$stateParams', function($stateParams) { 
      return $stateParams.menuItemId; 
      }] 
     } 
     } 
    } 
}) 

Answer 1

Как упоминалось ранее в комментариях, вы должны пойти на решение controllerAs. Добавьте для каждого вида свойство controllerAs с уникальным именем. Затем в шаблоне вы можете использовать это имя, которое представляет область действия.

Так, например, использовать в целях:

{ controllerAs: '' mainctrl }

и с вашей точки зрения {{}} mainctrl.quantity

controllerAs изобретен, чтобы не допустить этого виды типичных угловых головных болей.

Answer 2

<input type="number" ng-model="quantity" value="1"> 

По какой-то причине, атрибут value не связывается с $scope.quantity на PageLoad. Таким образом, $scope.$digest не прослушивает изменения этой переменной. В моих MenuItem.get() я инициализируюсь переменным там, например, так:

MenuItem.get($stateParams.menuItemId) 
    .success(function(data) { 
     $scope.menuItem = data; 
     $scope.quantity = 1; 
}); 

Это работает, даже если вы держите атрибут значения там. Но это тривиально.

Возможно, в этом вопросе отсутствовала ясность, потому что не надуманно предположить, что quantity может быть уже существовавшим свойством menuItem. Это был не тот случай. Это дополнительные данные, которые я прикрепляю к локальному экземпляру при создании OrderItem. Это отличается от MenuItem тем, что MenuItem содержит данные, которые будут отображаться в меню. OrderItem содержит данные, которые будут отображаться по заказу (например, заказываемое количество).

ASIDE: I referenced this article при исследовании ответа @ WalterBrand. Но я понимаю, что это предназначено для обработки данных между отношениями между родителями и дочерними элементами, чего нет ...

Спасибо вам помочь всем ...