Проблема с компонентом Angular 1.5 — как «сбросить» функцию, поступающую от его контроллера, при переходе в другое состояние?

У меня есть компонент Angular 1.5 с контроллером (который использует синтаксис controllerAs), где я написал функцию, добавляющую дополнительный класс css к элементу компонента, если на странице существует определенный элемент html. Если этот определенный элемент html не существует, этот дополнительный класс CSS не применяется к компоненту. Это работает на страницах, где существует элемент html, который я ищу. Однако при переходе в другое состояние компонент сохраняет дополнительный класс css независимо от того, что элемент html не существует в этом состоянии. Вы должны обновить приложение, чтобы «сбросить» функцию, которая исходит от контроллера компонента. Этот компонент используется на каждой странице приложения.

Например, это мой компонент:

function myComponentController() {

  activate();

  function activate(){
   addAdditionalCssClass();
  }

  function addAdditionalCssClass(){
   // code for adding additional css class to the component
   // if html element exists
  }

}

Он отлично работает, когда мы находимся в состоянии, когда этот элемент html существует. Однако когда мы переходим в другое состояние, где конкретный элемент html имеет значение null, функция addAdditionalCssClass() продолжает добавлять дополнительный класс к компоненту. Любая помощь/предложения будут очень признательны.


javascript angularjs angularjs-scope angularjs-1.5
person Petya Naumova    schedule 13.12.2016    source источник
comment
Я не понимаю, в чем проблема. Не могли бы вы предоставить больше кода?   -  person Fabio Silva Lima    schedule 13.12.2016

Ответы (1)


arrow_upward
1
arrow_downward

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

Одним из решений было бы, чтобы компонент зависел от списка классов, т.е. имел в своем атрибуте bindings атрибут classes, например.

.component('classSpecial', {
   template: "<div ng-class='$ctrl.classes'>Hello</span></div>",
   bindings: {
     classes: '<'
   }
})

См. простой пример здесь, где вы можете изменить классы компонента из контроллера страницы.

person T.Gounelle    schedule 13.12.2016
comment
Мне удалось решить эту проблему отчасти благодаря идее, которую вы мне подкинули. Спасибо! - person Petya Naumova; 14.12.2016