次のようなタグのAngularJSでディレクティブを作成しています<mytextarea class="custom_mta default_mtastyle" width="30" height="40" x="150" y="50">text here</mytextarea>
通常、例の属性を示しますが、これは包括的なリストではなく、一部を示していない可能性があります。それらをCSSに変換する必要があります。以下のコードは完全には機能しません。たとえば、幅が定義されていない場合は、ゼロではなく「auto」にするか、css 部分に含めないでください。
.directive('mytextarea', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<div ng-transclude></div>',
link: function (scope, element, attrs) {
/* add unique properties for this directive */
var newcss = 'width:' + (attrs.width | 0) + 'px; height:' + attrs.height + 'px;';
attrs.$set('style', 'color:red;' + newcss);
/* remove attributes that are no longer needed */
element
.removeAttr('width')
.removeAttr('height');
/* and set a default class */
attrs.$set('class', 'default_subscreen ' + attrs.class );
}
}
これを書くより良い方法はありますか?JSON構文を試しました:
var mystyle = {
position: 'absolute',
left: attrs.x,
width: attrs.width
}
attrs.$set('style', mystyle); // but mystyle is an object! should I use a filter?
たぶん、値に対して関数を実行できますか? 同様(attrs.width)?attrs.width:0;
に、JS には のように記述できるものがあることも覚えていますvar s = "my string" + (attrs.width | 0)
。それについての詳細な説明はどこで入手できますか? ディレクティブに同様のロジックを必要とするコンポーネントがいくつかあり、エレガントなソリューションを探しています。