编辑对象时了解 angularjs $apply 和 $scope

Question

几乎在您遇到的每个应用程序中都有 objects 需要编辑。

在我的例子中，我有一个 objects 的列表，您可以在其中编辑它们，然后即时编辑它们。（angular 的魔力）。然而，这有一个副作用，例如以下控制器：

    app.controller('editCategoryInstant', ['$http', '$scope', '$state', '$modalInstance', 'api', '$filter', 'category', 'LRM', function ($http, $scope, $state, $modalInstance, api, $filter, category, LRM) {

    $scope.LRM = LRM;
    $scope.category = category;
    $scope.ok = function () {
        $scope.category.color = $('#color').val();
        category = $scope.category;
        if ($scope.category .icon != null) {
            $http({
                url: api.getUrl('category', category.id),
                method: "PUT",
                data: {category: $scope.category}
            }).success(function (data, status, headers, config) {

            }).error(function (data, status, headers, config) {
                var i = 0;
            });
            $modalInstance.dismiss('cancel');
        }
        else {
            alert('Vælg ikon');
        }

    };

    $scope.cancel = function () {
        $scope.category = $scope.master;
        $modalInstance.dismiss('cancel');
    };

    $scope.clickUpload = function () {
        setTimeout(function () {
            angular.element('#fileUpload').trigger('click');
        }, 0);
    };

}]);

好的，我剪给你看。

为此，我希望编辑一个现有对象，如下所示：

    var category = {
    name: 'My Category',
    icon: 'fa fa-bomb',
    color: '#FFF',
    description: 'This describes the category'
};

现在我将 category 变量传递给 controller

控制器绑定到一个看起来像这样的 modal 视图：

    <div class="modal-header">
    <h3 class="modal-title" translate="STRUCTURE.CATEGORY.CREATE"></h3>
</div>
<form role="form" class="form-validation" ng-submit="ok()">
    <div class="modal-body">
        <div class="row">
            <div class="col-xs-12">
                <label class="control-label">{{'TERMS.NAME' | translate}}</label>
                <input type="text" placeholder="{{'TERMS.NAME' | translate}}" class="form-control"
                       ng-model="category.name" required>
            </div>
            <div class="col-xs-6" style="margin-top: 10px;">
                <label>{{'LIBRARY.CATEGORY.SELECTICON' | translate}}</label>
                <lb-icon-picker targetvariable="category"></lb-icon-picker>
            </div>
            <div class="col-xs-6" style="margin-top: 10px;">
                <label class="block">{{'LIBRARY.CATEGORY.SELECTCOLOR' | translate}}</label>
                <lb-color-picker targetvariable="category"></lb-color-picker>
            </div>
            <div class="col-xs-12" style="margin-top: 5px;">
                <textarea class="form-control" style="height: 150px" placeholder="{{'TERMS.DESCRIPTION' | translate}}" ng-model="category.description"></textarea>
            </div>

        </div>
    </div>
    <div class="modal-footer">
        <a class="btn btn-grey" ng-click="cancel()" tooltip="{{ 'TOOLTIP.CANCEL' | translate }}"><i
                class="fa fa-ban"></i></a>
        <button type="submit" class="btn btn-success" tooltip="{{ 'TOOLTIP.SAVE_AND_EXIT' | translate }}"><i
                class="fa fa-check-square-o"></i></button>
    </div>
</form>

现在我开始编辑对象，但是由于 two way data binding 原始对象也发生了变化。因此，如果我 cancel 所做的更改 object 看起来仍然像是已更改。

为此，我尝试查找 $apply 和 copy，但是我看不出在这个例子中如何实现。

谁能告诉我在上述情况下最好的做法是什么？你们是怎么处理这些事情的？

Answer 1

如果您想编辑副本，您可以使用：

 $scope.category = angular.copy(category);

然后当您确认服务器更新后，您可以使用更新后的副本扩展原始文件：

 angular.extend( category, $scope.category);

编辑对象时了解 angularjs $apply 和 $scope

Understanding angularjs $apply and $scope while editing object

javascript

data-binding

2-way-object-databinding

angularjs