私のコードを "controller as/this"構文から古典的な$ scope構文にコードを変換せずに変換しようとするときに重大な問題がありました。私は単純に "this"を$ scopeに置き換え、両方のコントローラの "controller as"割り当てを削除してみました。私はコントローラの/ this構文としてjsfiddleを作成していますので、構文を$ scopeに変換する前に正しく動作するはずです。 https://jsfiddle.net/6zk9vujo/6/ これは壊れたコードを表示するもう1つのjsfiffleです。これを$ scopeで置き換えて、コントローラをhtmlの割り当てとして削除します。https://jsfiddle.net/6zk9vujo/12/ありがとうございました。
HTMLテンプレートで
<div ng-app="app">
<div ng-controller="mainController as main">
<h2>
Main Controller
</h2>
<div>
<table>
<tr>
<td>Item</td>
<td>Price</td>
<td>Quantity</td>
<td></td>
</tr>
<tr ng-repeat="product in main.items">
<td>{{product.name}}</td>
<td>{{product.price | currency}}</td>
<td>
<button ng-click="main.increaseItemAmount(product)">
+
</button>
{{product.quantity}}
<button ng-click="main.decreaseItemAmount(product)">
-
</button>
<button ng-click="main.addToCart(product)">
Add to Cart
</button>
</td>
</tr>
</table>
</div>
</div>
<div ng-controller="cartController as cart">
<h2>
Cart Controller
</h2>
<div>
<table>
<tr>
<td>Item</td>
<td>Price</td>
<td>Quantity</td>
<td></td>
</tr>
<tr ng-repeat="product in cart.cartStorage.items">
<td>{{product.name}}</td>
<td>{{product.price | currency}}</td>
<td>
<button ng-click="cart.increaseItemAmount(product)">
+
</button>
{{product.quantity}}
<button ng-click="cart.decreaseItemAmount(product)">
-
</button>
<button ng-click="cart.removeFromCart(product)">
Remove from Cart
</button>
</td>
</tr>
</table>
</div>
</div>
</div>
JAVASCRIPT
angular.module('app', [])
.factory('cartStorage', function() {
var _cart = {
items: []
};
var service = {
get cartItems() {
return _cart;
}
}
return service;
})
.controller('mainController', function(cartStorage) {
var _this = this;
_this.cartStorage = cartStorage.cartItems;
_this.items = [{
name: 'Apple',
price: 2.5,
quantity: 1
}];
_this.addToCart = function(product) {
_this.cartStorage.items.push(product);
product.addedToCart = true;
}
_this.increaseItemAmount = function(product) {
product.quantity++;
product.showAddToCart = true;
}
_this.decreaseItemAmount = function(item) {
product.quantity--;
if (product.quantity <= 0) {
product.quantity = 0;
product.addedToCart = false;
product.showAddToCart = false;
var itemIndex = _this.cartStorage.items.indexOf(product);
if (productIndex > -1) {
_this.cartStorage.items.splice(productIndex, 1);
}
} else {
product.showAddToCart = true;
}
}
})
.controller('cartController', function(cartStorage) {
var _this = this;
_this.cartStorage = cartStorage.cartItems;
_this.increaseItemAmount = function(item) {
product.quantity++;
}
_this.decreaseItemAmount = function(item) {
item.quantity--;
if (item.quantity <= 0) {
item.quantity = 0;
item.addedToCart = false;
item.showAddToCart = false;
var productIndex = _this.cartStorage.items.indexOf(item);
if (productIndex > -1) {
_this.cartStorage.items.splice(productIndex, 1);
}
}
}
_this.removeFromCart = function(item) {
item.quantity = 0;
item.addedToCart = false;
item.showAddToCart = false;
var productIndex = _this.cartStorage.items.productOf(item);
if (productIndex > -1) {
_this.cartStorage.items.splice(productIndex, 1);
}
}
});
あなたはおそらくあなたが最初の場所に変換する必要がありますなぜあなたは – Phil
を持っていたものの問題述べるべきですか? – charlietfl
@charlietfl、私のアプリケーションの現在のコードベースは "コントローラとして/ this"の構文ではなく、このコードを使用することは、私のコードの残りの部分と統合しながら、私は一日のためにそれに取り組んできた。私のコードベースはどこでも古典的な$スコープを使用しています。 – user791134