0

次のようなタグの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)。それについての詳細な説明はどこで入手できますか? ディレクティブに同様のロジックを必要とするコンポーネントがいくつかあり、エレガントなソリューションを探しています。

4

0 に答える 0