Question

我在尝试将我的代码从“controller as / this”语法转换为经典的$ scope语法时遇到了重大问题，而没有破坏代码。我试着用$ scope替换“this”并删除两个控制器的“controller as”赋值，没有运气。我已经使用控制器为/ this语法创建了一个jsfiddle，因此您可以在将语法转换为$ scope之前了解它应该如何正常工作。 https://jsfiddle.net/6zk9vujo/6/ 这是另一个显示代码损坏的jsfiffle，当我只是用$ scope替换_this并将控制器删除为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/

或者，只需用控制器中的_this替换所有$scope引用。

您还有一堆混淆的product / item和productIndex / itemIndex变量。我已经在这个小提琴中对它们进行了标准化，并修复了重新添加相同产品的逻辑。

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

Answer 2

如果在视图中定义控制器时删除“as”语法，它将起作用：ng-controller="mainController"和ng-controller="cartController"。

编辑：我犯了错误的小提琴链接错误。

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

将“controller as”语法转换为经典$ scope的问题

2 个答案: