2013-10-21 3 views
5

に聞く私は、コードにトランスクルー内容の変更とディレクティブがレンダリングされるたびに実行しようとしていますは角 - 私はトランスクルードコンテンツを必要とする - トランスクルード変更

angular.module('myApp') 
    .directive('myDirective', function() { 
     return { 
      template: '<p ng-transclude></p>', 
      restrict: 'A', 
      transclude: true, 
      link: function postLink(scope, element, attrs) { 
      } 
     } 
    } 
); 

簡単な指示を持っています。私はこのケースで実行したい

例のアルゴリズムは次のとおりです。トランスクルードコンテンツの

  • カウント言葉。

私はscope.$watchを複数の形式で試しましたが、役に立たないです。

答えて

11

これを達成するために、ウォッチ式関数内でAngularに含まれるjqliteを使用できます。以下は、jqLit​​e(element.text()。length)を使用して、継承された要素の長さを監視するコードです。このディレクティブが添付されている要素の長さが変更されると、時計が起動します。

そして、新しい長さは、newValueとして時計内の2番目の関数に渡されます(最初の時計関数から返すので)。

myApp.directive('myDirective', function() { 
    return { 
     template: '<p ng-transclude></p>', 
     restrict: 'A', 
     transclude: true, 
     replace: true, 
     link: function (scope, element, attrs) { 

      scope.$watch(function() { 
       return element.text().length; 
      }, 

      function (newValue, oldValue) { 
       console.log('New Length ', newValue); 
      }); 
     } 
     } 
    }); 

私はここで働いjsfiddleを持っている:

http://jsfiddle.net/2erbF/6/

これは、単語/文字カウントシナリオに対応しています。しかし、長さの変更だけでなく、変更が発生した場合には、element.text()自体にテストを書くことができます。

+1

ありがとうございます。私がしなければならなかったことは、機能を見ることです!私はそれをやっていないとは信じられません。 :) –

関連する問題