AngularJS主題顏色選擇器問題

Question

http://codepen.io/anon/pen/MJbagW

在上面的codepen中，我有主題顏色選擇器，它根據單擊的按鈕更改顏色。

問題：我想知道是否可以將其更改為這種情況，您通過指令傳遞想要的顏色作為參數

例如：

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

因此，在這種情況下，指令中將使用藍色一詞 ，然后將藍色主題應用於該應用程序。 我想知道這是否可能？

我需要它，因為我想根據用戶的需要更改剛創建的指令的顏色。

問題：我上面的問題可行嗎？ 還是有另一種方法，我可以僅通過傳入參數來更改角度主題的顏色。

Answer 1

在您的示例中，您可以看到指令“ themePreview”已經帶有參數：

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

它采用在屬性中傳遞的主色和強調色，您可以在應用程序中復制該行為。

例：

在Codepen中，更改屬性顏色：

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

由於示例指令使用雙向綁定，因此必須使用單引號字符串。

或者您可以更改為文本綁定@ ：

指示

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

HTML

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

您可以查找有關“ 隔離范圍”和“ 本地范圍屬性”的信息 ，以清楚地了解要實現的目標。 嘗試閱讀此博客文章 。