Обновление углового обзора после изменения значения

Question

Обновление углового обзора после изменения значения

0

Поскольку страница, над которой я работаю, - это устаревшая страница с большим количеством кода dead/living/zombie, который я не могу вставить здесь целиком. Поэтому я пытаюсь опубликовать дайджест моей проблемы с образцом кода.

У меня есть страница, в которой данные поступают из Angular. Это куча продуктов. Каждый продукт имеет атрибут с именем showProduct который определяет его, должен быть показан или нет. showProduct установлен в 1 когда он сначала извлекается из бэкэнд. При рендеринге html в каждом продукте div у меня есть ng-show={{product.showProduct}}. ng-show работает правильно в первый раз, когда отображается его загруженный, все продукты. Если из бэкэнд я установил значение 0 для любого продукта, он скрыт.

После загрузки продуктов, если пользователь нажимает кнопку, мне нужно скрыть некоторые из этих продуктов. Этот обработчик нажатия кнопки находится в jQuery.

Поэтому я делаю следующее:

  prod =  angular.element($('#product-section')).scope().ProductList;

prod теперь представляет собой массив продуктов с их атрибутами. Теперь я перебираю этот массив, проверяю соответствующий атрибут (который я знаю на основе того, на какую кнопку нажали) и основываясь на его значении для каждого продукта, я установил для атрибута showProduct значение 0.

Однако это не обновляет представление, чтобы скрыть этот продукт. Если я console.log angular.element($('#product-section')).scope().ProductList, я вижу, что его showProduct правильно обновлялся от 1 до 0.

Я предполагаю, что мне нужно что-то сделать, чтобы сделать productList "повторно разобранным" и обновиться на странице. Однако я не уверен, как это сделать.

Мне просто нужны были некоторые концептуальные советы о том, чего я могу потерять, потому что я понимаю, что предоставление "конкретного" кода для моей ситуации сложно.

В двух словах, как только я обновил угловое значение извне, как я могу сообщить Angular о повторном использовании кода и обновить представление? Что-то вроде того, как это происходит автоматически для моделей при обновлении данных в текстовом поле...

Я попытался сделать angular.element($('#product-section')).scope().$apply(); но это не сработало.

Любые указатели приветствуются.

Undefined Variable 24 нояб. 2015, в 20:12

Источник

Теги:

javascript

jquery

html

angularjs

2 ответа

Ещё вопросы

Guido Kitzing · Answer 1 · 2015-11-24T18-00-00.000Z

Угловое использует двустороннюю привязку данных, которая работает, когда вы используете Angular-Controller (или Directive и т.д.), В котором вы определяете свою модель. В вашем HTTML вы используете что-то вроде этого (очень грубый пример):

<div ng-controller="myProductListController>"
    <div ng-repeat="(index, product) in productList">
        <div>{{ product.name }}</div>
    </div>
</div>

productList находится в вашем myProductListController и доступен в области (вашей модели) вашей директивы ng-controller.

Теперь, каждый раз, когда productList изменяется в вашем контроллере, ваше представление будет обновляться автоматически.

Области (модели) привязаны к некоторому Угловому контроллеру (или Директиве,...). Поэтому вам нужно иметь это, чтобы использовать двустороннюю привязку.

надеюсь, это поможет

Jodevan · Answer 2 · 2015-11-24T17-36-00.000Z

Попробуй это:

$scope.$apply(function() {
    angular.element($('#product-section')).scope().ProductList;
});

Делая это, вы сообщаете AngularJS, чтобы посмотреть, что делает ваш закрытый код, и соответственно обновить представление.

Просто некоторые соображения: не могли бы вы просто просто обновить модель напрямую, а не вызывать внешний код? Этот подход всегда рекомендуется.

Просто примечание: $scope.$apply could быть проблематично, если используется само по себе (может уже быть запущен цикл дайджеста). Вы можете использовать $timeout(callback-func, 0) чтобы обойти эту проблему.