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

Question

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

У меня есть страница, в которой данные поступают из Углового. Это куча продуктов. Каждый продукт имеет атрибут с именем 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();, но это не помогло.

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

Answer 1

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

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

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

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

Answer 2

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

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

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

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

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

Надежда, что помогает