我想建立一個指令,可以讓我在一個標籤使用Twitter的引導組件:AngularJS指令Twitter的引導
標籤看起來是這樣的:
<bootstrapinput
model="lastName"
key="lastName"
localized="Surname"
formpath="playerForm.lastName"
required>
</bootstrapinput>
該指令看起來像這樣
.directive('bootstrapinput', function() {
return {
restrict:'E',
compile:function (tElement, tAttrs, transclude) {
var type = tAttrs.type || 'text';
var required = tAttrs.hasOwnProperty('required') ? 'required' : '';
var ngClazz = tAttrs.hasOwnProperty('formpath') ? 'ng-class="{error: ' + tAttrs.formpath + '.$invalid}"' : '';
var html = '<div class="control-group" ' + ngClazz + '>' +
'<label class="control-label" for="' + tAttrs.key + '">' + tAttrs.localized + '</label>' +
'<div class="controls">' +
'<input ng-model="'+tAttrs.model+'" type="' + type + '" id="' + tAttrs.key + '" name="' + tAttrs.key + '" placeholder="' + tAttrs.localized + '" ' + required + ' />' +
'</div>' +
'</div>';
tElement.replaceWith(html);
}
}
});
該標籤嵌入在控制器中。但是如果我通過示波器訪問控制器中的模型,則模型是空的。 此外,不評估ng-class屬性,即CSS未按原樣分配。
編輯現在可以訪問模型。但是ng-class屬性仍然沒有被正確評估。
看到你可能會從使用[$編譯](http://docs.angularjs.org/api/ng.$compile)服務中受益。 – Humberto
你對'ng-class'屬性有什麼期待?基於ngClazz變量,如果'formpath'屬性存在,它看起來像'ng-class'將是一個空字符串。 – Humberto
如果表單元素無效(它在開頭處),則該div的CSS類應該是「error」(用於twitter引導程序)。該機制只有在設置了禁止時纔有效。在生成的HTML中,ng-class被正確設置。但由於某種原因,造型不是。 – Soccertrash