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); } });对象推入我的订单数组之前设置其数量时，它总是返回 undefined 。

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

这是我的HTML：

$scope.quantity

为什么$localstorage返回 undefined ，即使数据绑定发生且t

ASIDE ：window.localStorage是我定义为AngularJS包装器的模块，用于访问本机menu对象，以防您想知道。

编辑：这是我的app.js文件，我在其中定义了我的状态。以下是相关的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; }] } } } })州供参考......

{{1}}

Answer 1

如前面评论中所述，您应该选择控制器作为解决方案。为每个视图添加具有唯一名称的controllerAs属性。然后在您的模板中，您可以使用代表范围的名称。

例如，在您的视图中使用：

{ controllerAs：'mainctrl' }

并在您的视图中{{mainctrl.quantity}}

控制器是为了防止这种典型的角度头痛而发明的。

Answer 2

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

由于某种原因，value属性在页面加载时未绑定到$scope.quantity。因此，$scope.$digest不会侦听对该变量的更改。在我的MenuItem.get()中，我在那里初始化了变量，如下所示：

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

即使你保留value属性，它仍然有效。但这是微不足道的。

在这个问题上可能缺乏明确性，因为假设quantity可能是menuItem的预先存在的属性并不是一件容易的事。此情况并非如此。这是我在生成OrderItem时附加到本地实例的额外数据。这与MenuItem的不同之处在于MenuItem包含将在菜单上显示的数据。 OrderItem包含将在订单上显示的数据（例如，订购的数量）。

ASIDE ：我{@ 3}}在研究@ WalterBrand的答案时。但我知道这是为了处理父子关系之间的数据，这不是......

谢谢你帮助大家......

Angular $ scope变量undefined

2 个答案: