0

内部要素の値を任意の変数にスコープし、その変更を監視するにはどうすればよいですか?

//search.html
<div>
   <input type="search" class="input-medium search-query" />
</div>

angular.module('search',[])
   .directive "searchBar", ->
      restrict: "E"
      templateUrl: 'search.html'
      replace: true

ここで、入力の値の変更 ('keyup') を $watch し、「外部」から現在の値にアクセス (取得および設定) したいと考えています。次のように、任意の属性を持ってアクセスできますか?

<div>
  <search-bar value='{{searchTerm}}' />
</div>

私がやろうとしていることは明らかだと思います。

4

2 に答える 2

1

searchTerm ディレクティブ リンク関数内の値を設定できます。

   link: function(scope, element, attrs) {
        // input element
        var input= angular.element(element.children()[0]);
        input.bind('keyup', function(){
            scope.searchTerm = input.val();
        });
   }
于 2013-05-16T17:48:57.533 に答える
0

ジョナサンの答えは、親スコープに「searchTerm」変数を作成します。ディレクティブを別のスコープ (フォームなど) に配置すると、そのフォームの外ではアクセスできないため、これは信頼できません。必要な場所に「searchTerm」を作成し、それを「searchBar」に渡す必要があります。「searchBar」に分離スコープを使用していない場合は、それを渡す必要さえありません。分離されたスコープを使用する場合、渡すと次のようになります。

angular.module('search',[])
   .directive("searchBar", function () {
      restrict: "E"
      scope: {
          searchTermInside: '=searchTerm'
      },
      templateUrl: 'search.html'
      replace: true});

そして、次のようにディレクティブを使用します。

<search-bar searchTerm="searchTermOutside" />

そしてテンプレで

//search.html
<div>
   <input type="search" ng-model="searchTermInside" class="input-medium search-query" />
</div>
于 2013-05-16T18:50:13.827 に答える