AngularJS 主题颜色选择器问题

Question

在上面的 codepen 中，我有主题颜色选择器，它会根据单击的按钮更改颜色。

问题：我想知道是否可以将其更改为这种情况，您通过指令将您想要的颜色作为参数传递

例如：

<my-application color="blue"></my-application>

因此在这种情况下，word blue 将在指令中使用，然后蓝色主题将应用于应用程序。我想知道这是否可能？

我需要这个，因为我想根据用户的需要更改我刚刚创建的指令的颜色。

问题：我上面的问题可行吗？或者还有另一种方法可以通过仅传递参数来更改 angular 主题的颜色。

Answer 1

在您的示例中，您可以看到指令“themePreview”已经采用参数：

<theme-preview primary="primary" accent="accent"></theme-preview>

它采用属性中传递的主色和强调色，您可以在您的应用程序中复制该行为。

示例：

在代码笔中，更改属性颜色：

<theme-preview primary="'purple'" accent="'yellow'"></theme-preview>

由于示例指令使用 two-way 绑定，您必须将字符串用单引号引起来。

或者您可以更改为文本绑定@:

指令

{
  restrict: 'E',
  templateUrl: 'themePreview.tmpl.html',
  scope: {
  primary: '@',   //<--- Text binding
  accent:  '@'    //<--- Text binding
  }
}

Html

<theme-preview primary="purple" accent="yellow"></theme-preview>

您可以查找有关 Isolate Scope 和 Local Scope Properties 的信息，以清楚地了解您想要实现的目标。尝试阅读此 blog post.

AngularJS 主题颜色选择器问题

AngularJS theme color picker issue

javascript

jquery

angularjs

angular-components

示例：

指令

Html