web-dev-qa-db-ja.com

Angularディレクティブの属性の存在を確認してください

特定の属性がディレクティブに存在するかどうかを確認することは可能ですが、理想的には分離スコープを使用するか、最悪の場合は属性オブジェクトを使用します。

この<project status></project>のようなディレクティブを使用して、ステータスアイコンが条件付きでレンダリングされますが、ステータス属性が存在する場合のみです。

return {
  restrict: 'AE',
  scope: {
    status: '@'
  },
  link: function(scope, element, attrs) {
    scope.status === 'undefined'
  }
}

テンプレートで使用できるように、スコープに直接バインドされるのが理想的です。ただし、バインドされた変数の値はndefinedです。 &読み取り専用および=双方向バインディングについても同じことが言えます。

<project status='true'></project>を追加することで簡単に解決できることはわかっていますが、頻繁に使用するディレクティブの場合は、その必要はありません。 （XHTMLの妥当性、問題ではありません）。

javascriptangularjsangularjs-directiveangularjs-scope
38
Dan Prince

これを行う方法は、リンク関数のattrsパラメーター内の属性の存在を確認し、これをディレクティブの分離スコープ内の変数に割り当てることです。

scope:{},
link: function(scope, element, attrs){
  scope.status = 'status' in attrs;
},

これは、リンク関数内でifステートメントを使用しなくても機能するはずです。

65
James Jackson

あなたがしたいことをする方法は、リンク関数の属性オブジェクトを見ることです：

link: 
  function(scope, element, attrs) {
    if("status" in attrs)
       //do something
  }
18
Joao Leal

angular 1.5+コンポーネントを使用するときに属性をチェックするには、次のように$ postLinkライフサイクルフックと$ elementサービスを使用できます。

constructor(private $element) {}

$postLink() {
  if(!this.$element.attr('attr-name')){
    // do something
  }
}
4
Justin Boyson

attrs値はjavascript objectのタイプです。属性の存在を確認するには、inキーワードの代わりにhasOwnProperty()メソッドを使用することもできます。

だから、それは可能性があります：

_link: function(scope, element, attrs) {
  var is_key_exist = attrs.hasOwnProperty('status');//Will return true if exist
}
_

これでinキーワードとhasOwnProperty()メソッドの違いをさらに読むことができます link

1
Bayu