0

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

例如，这是我的组件：

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()继续向组件添加额外的类。任何帮助/建议将不胜感激。

4

1 回答 1

1

据我了解，您有一个包含一些动态 html 的页面和该页面中的一个组件，该组件应反映当前状态及其类的更改。

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

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

在此处查看一个简单的示例，您可以在其中从页面的控制器更改组件的类。

于 2016-12-13T19:14:13.123 回答