"controller as"構文をclassic $ scopeに変換する際の問題

Question

私のコードを "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); 
     } 
    } 
}); 

Answer 1

、すべてのmain.とcart.を削除し、ng-controller="mainController"とng-controller="cartController"に変更します。

コントローラでは、$scopeを注入し、最も簡単な移行のために_thisに割り当てます。

.controller('mainController', function($scope, cartStorage) { 
    var _this = $scope; 

と

.controller('cartController', function($scope, cartStorage) { 
    var _this = $scope; 

https://jsfiddle.net/6zk9vujo/10/

---

また、ちょうどあなたのコントローラで$scopeを持つすべての_thisの参照を交換してください。

また、product/itemとproductIndex/itemIndexという変数が混在しています。私はこれらすべてをこのフィドルで標準化し、同じ製品を再追加するというロジックを修正しました。

https://jsfiddle.net/6zk9vujo/13/

Answer 2

ビューでコントローラを定義するときに、構文「として」を削除した場合には動作します：ng-controller="mainController"とng-controller="cartController"。

編集：誤ったフィドルリンクを間違えてしまった。

https://jsfiddle.net/analiza641/jr0stbLq/3/