在编辑对象时理解angularjs$apply和$scope
Understanding angularjs $apply and $scope while editing object
在您遇到的几乎每个应用程序中,都有需要编辑的objects
。
在我的情况下,我有一个objects
的列表,您可以在其中编辑它们,然后动态编辑它们。(棱角分明的魔力)。然而,这有一个副作用,例如以下控制器:
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
,但我看不出在本例中如何实现。
有人能告诉我在上述情况下什么是最好的练习吗?你们是怎么处理这些事情的?
如果您想编辑副本,可以使用:
$scope.category = angular.copy(category);
然后,当你确认服务器更新时,你可以用更新后的副本扩展原来的:
angular.extend( category, $scope.category);
相关文章:
- 另一个if(!$scope.$$phase)$scope$apply()szenario-需要帮助才能通关
- $scope.apply()何时应用于angular
- 使用$scope的最佳实践$apply();或者甚至是使用Angular Component的非Angular内容中的$
- Angular $scope更新、导航和 $scope.$apply() 后不绑定到视图
- scope.$apply 是未定义的,在 scrolly 指令中不起作用
- 在$apply中刷新$scope
- 了解窗口调整大小事件与 scope.$apply 与函数$watch
- 棱角分明的$scope$apply无法正确使用form.submit()
- AngularJS-如何查看触发$scope的内容$apply()
- 棱角分明的谷歌地图标记和$scope$apply();错误
- 在web工作者、快速定时器和$scope中遇到AngularJS性能问题$apply()
- 如何调用$scope$apply()仅当它's还没有进行中
- 我正在使用 $scope.$apply 在 http 调用后更新对象数组.谁能告诉我正确的方法
- 类型错误: $scope.apply 不是一个函数
- 为什么从指令中更改外部作用域需要 scope.$apply(),即使我将范围选项设置为 false
- is it $http? is it $scope.$apply?
- 使用 $scope.$apply 在 TypeScript 中使用控制器作为 vm 语法时
- 如何在$scope.$apply上执行角度指令
- 为什么我要使$scope$apply()
- AngularJS:你能得到一个'正在进行的摘要'来自多个$scope的错误$apply()调用