web-dev-qa-db-ja.com

ng-clickでDOMオブジェクトへの参照を渡します

私はng-clickで同じコールバックを持つ複数の要素を持っています：

<button ng-click="doSomething()"></button>
<button ng-click="doSomething()"></button>
<button ng-click="doSomething()"></button>
<button ng-click="doSomething()"></button>

// In controller:
$scope.doSomething = function() {
  // How do I get a reference to the button that triggered the function?
};

DoSomethingを呼び出したオブジェクトへの参照を取得するにはどうすればよいですか？ （属性を削除する必要があります）

angularjsangularjs-ng-click
64
jviotti

angularの方法はangularのドキュメントに示されています:)

https://docs.angularjs.org/api/ng/directive/ngReadonly

彼らが使用する例はここにあります：

<body>
    Check me to make text readonly: <input type="checkbox" ng-model="checked"><br/>
    <input type="text" ng-readonly="checked" value="I'm Angular"/>
</body>

基本的にangularの方法は、入力を読み取り専用にするかどうかを保持するモデルオブジェクトを作成し、それに応じてそのモデルオブジェクトを設定することです。 angularの美しさは、ほとんどの場合、dom操作を行う必要がないことです。 angularは、モデルが設定された方法でビューをレンダリングします（angularがdom操作を行い、コードをクリーンに保ちます）。

したがって、基本的には、以下のようなことを行うか、または this の例を確認してください。

<button ng-click="isInput1ReadOnly = !isInput1ReadOnly">Click Me</button>
<input type="text" ng-readonly="isInput1ReadOnly" value="Angular Rules!"/>
20
testing123

技術的に言えば、次のことを行います：

<button ng-click="doSomething($event)"></button>

// In controller:
$scope.doSomething = function($event) {
  //reference to the button that triggered the function:
  $event.target
};

これはおそらく、AngularJSの哲学がモデル操作に焦点を合わせ、AngularJSにレンダリングを行わせる（宣言的UIからのヒントに基づいて）ためにしたくないことです。 AngularJSの世界では、コントローラーからDOM要素と属性を操作することは大したことではありません。

詳細については、この回答を確認してください： https://stackoverflow.com/a/12431211/1418796

213
pkozlowski.opensource