如何將非字符串值傳遞給Angular指令？

我有一個自定義的角度指令，用圖形表示我的webapp中的一個「活動」。我用這樣的：如何將非字符串值傳遞給Angular指令？

<activity-box ng-repeat="act in activities" 
    model="act" active="{{currentActivity == act}}" />

我的指令具有隔離範圍，並宣佈model和active這樣的：

appDirectives.directive('activityBox', function() { 
    return { 
     template: '<div ng-class="{activityActive: active == \'true\'}">{{model.name}}</div>', 
     restrict: 'E', 
     replace: true, 
     scope: { 
      model: '=', 
      active: '@' 
     }, 
     link: ... 
    }; 
});

我沒有關於model屬性擔心，但我active屬性總是被作爲一個字符串。當currentActivity == act爲真，則active保持字符串值"true"（而不是布爾值true）或"false"（而不是false）。

這意味着雖然它在概念上是一個布爾值，但我必須將其視爲一個字符串。例如，我想寫ng-class="{activityActive: active}"而不是ng-class="{activityActive: active == 'true'}"。現在，如果我忘記了額外的部分，這總是評估爲真，因爲"false"和"true"都是真的。

有沒有什麼辦法讓我獲得像這樣的非字符串屬性？達到此目的的最佳方式是什麼？

來源

2014-05-16 Jean-Philippe Pellet

當你用'@'傳遞參數時，它總是被視爲一個字符串（在你的情況下，它首先被內插）。如果你想要一個表達式的值，你應該使用'='。 [PLNKR]（http://plnkr.co/edit/7q5w6bYlwzrC80ht4eGK?p=preview）。 –

@arturgrzesiak非常感謝 - 我還沒有意識到我也可以在使用'= ='映射的屬性中使用完整表達式（甚至不可分配的表達式）。 –

怎麼辦？

<activity-box ng-repeat="act in activities" 
    model="act" active="currentActivity == act" /> 

scope: { 
      model: '=', 
      active: '=' 
     },

剛剛嘗試 - 它的工作原理。並且具有約束力，所以如果'currentActivity'或'act'會改變，那麼'active'內部指令的值也會改變。

來源

2014-05-16 13:40:53 gorpacrate

非常感謝 - 出於調試目的，我已經在我的模板中將'active'綁定到''，並且（可以理解）拋出一個'noassign'異常當我點擊複選框時。我雖然在編譯時拋出了這個問題，但已經放棄了這個解決方案。非常感謝！ –

由於代碼如上所示，該指令不與您的標籤相關聯。

默認情況下，指令僅限於屬性，並且您試圖將其用作元素。

在你的指令添加這一行：

replace: true, 
restrict: 'E', // <--- This line 
scope: {

編輯您可以通過定義範圍在使用=它鏈接到父範圍，但在你的指令的變化而改變其在活躍標記接受它在你的控制器的範圍

active="currentActivity == act" 
scope: { active: '=' }

但是你可以通過一個字符串接受並使用$parse服務解析它在你的控制器：

active="{{currentActivity == act}}" 
scope: { active: '@' } 
link: function(scope){ 
    var booleanValue = $parse(scope.active)(); 
}

來源

2014-05-16 13:48:07 Brocco

其實我在我的代碼中有'限制：'E''，但是當我複製粘貼時，在我的問題中意外地忽略了它。你的回答沒有解決string-vs-boolean問題。 –

你是對的，但你的上面是一個可行的解決方案，即使你希望有一種不同的方法到達那裏。我試圖解釋不同的方法，你可以在我的更新的答案中引用父指令的範圍，希望能夠澄清'='和'@'之間的區別 – Brocco

如果我使用'$ parse'，雖然它意味着'booleanValue'獲勝當模型改變時不會自動更新，對吧？我必須'觀看'屬性。 –

如何將非字符串值傳遞給Angular指令？

回答

相關問題