Probleme beim Umwandeln der "Controller as" -Syntax in den klassischen $ scope

Question

Ich hatte große Probleme, meinen Code von der "Controller als/this" -Syntax in die klassische $ scope-Syntax zu konvertieren, ohne den Code zu unterbrechen. Ich habe versucht, einfach "this" durch $ scope zu ersetzen und die "controller as" Zuweisungen für beide Controller zu entfernen, ohne Glück. Ich habe eine jsfiddle dafür mit dem Controller als/diese Syntax erstellt, so dass Sie sehen können, wie es korrekt funktionieren sollte, bevor Sie die Syntax in $ scope konvertieren. https://jsfiddle.net/6zk9vujo/6/ Dies ist ein weiterer JSFiffle zeigt den gebrochenen Code, wenn ich einfach ersetzen _this mit $ Scope und entfernen Sie den Controller als Zuweisungen im HTML https://jsfiddle.net/6zk9vujo/12/ Vielen Dank für Ihre Hilfe im Voraus.

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

In der Vorlage, entfernen Sie alle main. und cart. und ng-controller="mainController" und ng-controller="cartController" ändern.

In Ihre Steuerungen injizieren Sie $scope und weisen sie _this für die einfachste Migration zu.

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

und

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

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

---

Alternativ ersetzen Sie einfach alle _this Referenzen mit $scope in Ihrem Controller.

Sie haben auch eine Reihe von product/item und productIndex/itemIndex Variablen vertauscht. Ich habe sie alle in dieser Geige standardisiert und die Logik behoben, um das gleiche Produkt wieder hinzuzufügen.

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

Answer 2

Es wird funktionieren, wenn Sie die "als" Syntax entfernen, wenn Sie den Controller in der Ansicht zu definieren: ng-controller="mainController" und ng-controller="cartController".

Bearbeitet: Ich machte einen Fehler, die falsche Geige Verbindung zu setzen.

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