0

私が提供するテンプレートにいるとき

<div id="container">
    <textarea name="message"></textarea>
    <button value="send" ng-click="testMethod($parent)">
</div>

JSで：

$scope.testMethod = function(element) {
    console.log("sending message");
    console.log(element); // comes back with an element
    console.log(element.children()); // <-- this throws an exception
    console.log(element.firstChild()); // <-- this throws an exception
}

簡単に言えば、要素をメソッドに渡すことで、親の子要素を選択するにはどうすればよいですか?

4

2 に答える 2

0

Controller上記で作成したメソッドは、html 要素を直接操作するべきではありません。テンプレートがバインドされているオブジェクトでのみ機能する必要があります。

コードで UI 要素を操作する場合はdirective、AngularJS で を作成します。要素とその子は、ディレクティブ関数で簡単にアクセスできる必要があります。属性を使用して、ディレクティブ スコープをコントローラー スコープのプロパティとメソッドにバインドし、コントローラー関数のビジネス ロジックとディレクティブ関数の UI 要素の間の接続を作成できます。

Directivesおよびに AngularJS に関するドキュメントがたくさんありますがScopes、それを確認しないと、AngularJS で最も単純なタスクを実行することは非常に困難です。

于 2013-05-10T21:05:27.760 に答える
0

ケタンの答えは正しいです。なぜ子要素を取得したいのですか? 通常、コントローラーから直接 html を操作することはありませんが、ページに変更を加える可能性のある $scope のデータを更新する必要があります。単純な古いコントローラーであなたの例を取り上げるだけで、私たちは気にしませんelementが、スコープのデータについては気にしません。

この簡単な例では、ボタンがクリックされたときにテキストエリアを更新し、別の div を表示します。アイテム配列にアイテムを追加します。jQuery を使用すると、javascript など$(el).val()を介して dom を操作します$(el).find()が、Angular コントローラーでは、dom については心配せず、データのみを心配します。

デモ: http://plnkr.co/edit/aL6p09DrQsUotu7vnceZ

app.controller('MainCtrl', function($scope) {

  $scope.message = "Some data";
    $scope.testMethod = function() {
    $scope.items.stuff.push($scope.message);
    $scope.clicked = true;    
    $scope.message = $scope.message  + ' you clicked me.';
  }
  $scope.items = {stuff:['one', 'two', 'three'],id:1,name:'yeah'}


});

<body ng-controller="MainCtrl">
  <div id="container" ng-form>

    <textarea name="message" ng-model="message"></textarea>
    <button value="send" ng-click="testMethod()">Send</button>
</div>
  <div ng-show="clicked">
    I was clicked
  </div>


  <h2>{{items.name}}</h2>
  <div ng-repeat='item in items.stuff'>
    {{item}}
  </div>

</body>

上記はコントローラー中心であり、ページ上の要素を操作することはディレクティブを使用した角度の一部であり、達成しようとしていることに関する正確な情報がもう少しない場合 (フォーム入力値を取得していますか?)、正確な方向を示すのは困難です。この特定の問題のために。

于 2013-05-11T15:28:01.630 に答える