угловой ng-click внутри ng-repeat для обновления $ scope, а затем использовать $ apply для обновления dom

62
7

Я использую угловой 1.2

ng-repeat создает divs, которые также содержат ng-click

ng-click обновляет $ scope при нажатии

изменение в $ scope отражено в ng-repeat с использованием $ apply

Он работает... но я получаю сообщение об ошибке, когда я нажимаю, и я думаю, что применяю $ apply неправильно

здесь моя ссылка jsfiddle

function appcontrol ($scope, $log) {
// declare $scope vars
$scope.currentlist = [];
for (var i = 0; i < 10; i++) {
$scope.currentlist[i] = {'key':i, 'value':i};
}
$scope.extra = 'My Extra';
$scope.anotherextra = 'Another Extra';
// click handler
$scope.handleCellClick = function(cellnumber){
$log.log(cellnumber + ' clicked');
// update the $scope property
$scope.currentlist[cellnumber].value = 'AAA';
// push out the new change to the dom
$scope.$apply();
// trigger other stuff
}
// click handler
$scope.handleExtraClick = function(arg){
$log.log('extra clicked ', arg);
// update the $scope property
if (arg=='My Extra') $scope.extra = 'AAA';
if (arg=='Another Extra') $scope.anotherextra = 'AAA';
// push out the new change to the dom
$scope.$apply();
// trigger other stuff
}
}

и html

 <div ng-controller="appcontrol">
<div ng-repeat="item in currentlist" id="cell{{item.value}}" ng-model="item.value" class="cell" ng-click="handleCellClick(item.key)">{{item.value}}</div>
<div id="cell{{extra}}" ng-click="handleExtraClick(extra)">{{extra}}</div>
<div id="cell{{anotherextra}}" ng-click="handleExtraClick(anotherextra)">{{anotherextra}}</div>
</div>

спросил(а) 2021-01-19T15:28:21+03:00 2 месяца, 3 недели назад
1
Решение
97

Угловой уже вызов $apply для вас, когда вы используете ng-click. Если вы выберете всю $scope.$apply() в коде, ошибка не появится, и она будет работать точно так же. Обновленная скрипка

ответил(а) 2021-01-19T15:28:21+03:00 2 месяца, 3 недели назад
76

Вам не нужно $scope.$apply() которым вы его используете. AngularJS автоматически загружает данные в $scope. $apply() используется для выполнения выражения в угловом формате вне рамок. Кроме того, я бы очень быстро использовал эту функцию, поскольку это замедляет вашу производительность.

Например, вы должны использовать $apply() для данных, измененных вне углового значения следующим образом:


//explicitly auto adjust width and height when user changes size
$scope.$apply( function(){
$scope.width = $window.innerWidth;
$scope.height = $window.innerHeight;
});

Подробнее here--> https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply

ответил(а) 2021-01-19T15:28:21+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема