实施例

Question

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

问题：我想知道是否可以将其更改为此方案，您将指令中的颜色作为参数传递

例如：

public class Singleton {
private volatile static Singleton singleton;
private Singleton(){}
public static Singleton getSingleton(){
    if (singleton == null) {
        synchronized (Singleton.class) {
            if (singleton == null) {
                singleton = new Singleton();
            }
        }
    }
    return singleton;
}

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

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

问题：我的问题是否可行？或者是否有另一种方法我可以通过传入参数来改变角度主题的颜色。

Answer 1

在您的示例中，您可以看到指令＆＃34; themePreview＆＃34;已经采取参数：

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

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

实施例

在codepen中，更改属性颜色：

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

由于example指令使用双向绑定，因此必须使用单引号字符串。

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

指令

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

HTML

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

您可以查找有关隔离范围和本地范围属性的信息，以便清楚地了解您要实现的目标。请尝试阅读此blog post。

AngularJS主题颜色选择器问题

1 个答案:

实施例

指令

HTML