Angular 1.5 组件问题 - 如何 'reset' 一个来自其控制器的函数在改变到另一个状态时？

Question

我有一个带有控制器的 Angular 1.5 组件（使用 controllerAs 语法），我在其中编写了一个函数，如果某个 html 元素存在于页面中。如果此特定 html 元素不存在，则此附加 css class 不会应用于组件。这适用于存在我正在寻找的 html 元素的页面。但是，当切换到另一个状态时，组件会保留额外的 css class，而不管 html 元素在该状态下是否存在。您必须刷新应用程序才能 'reset' 来自组件控制器的功能。该组件用于应用程序中的每个页面。

例如，这是我的组件：

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() 继续向组件添加额外的 class。任何 help/suggestions 将不胜感激。

Answer 1

据我了解，您有一个包含一些动态 html 的页面和该页面中的一个组件，该组件应通过其类.

中的更改反映当前状态

一个解决方案是让组件依赖于类的列表，即在其 bindings 中有一个 classes 属性，例如

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

查看 simple example here，您可以在其中从页面控制器更改组件的类。

Angular 1.5 组件问题 - 如何 'reset' 一个来自其控制器的函数在改变到另一个状态时？

Angular 1.5 component issue - how to 'reset' a function coming from its controller when changing to another state?

javascript

angularjs

angularjs-scope

angularjs-1.5