如何在指令中偵聽textarea中的更改？

我有一個文本，看起來像這樣：如何在指令中偵聽textarea中的更改？

<textarea ng-controller="text" autoexpand id="tasks" ng-focus="uncheckAll()" ng-change="processText()" ng-model="tasks.tasks"></textarea>

的指令自動擴展是基於你寫多少行添加行的文本區域。（它在CSS NOWRAP設置）

//adding rows to the textarea based on the number of newlines. 
directive('autoexpand', function($timeout){ 
    function expand(element){ 
     var count = element.val().split('\n').length+1; 
     element.attr('rows', count) 
    } 
    return { 
     restrict: 'A', 
     require: '?ngModel', 
     link: function(scope, element){ 
     //onload 
     $timeout(function(){ 
      expand(element); 
     }); 
     element.on('keydown', function(){ 
       console.log('change') 
       expand(element) 
      }); 
     } 

    } 
}).

，當我通過寫它更新textarea的，但有時，它是從模型更新這工作。我怎麼能在這種情況下運行expand()也（我試過element.on('change'...，element.change(和element.bind('change'，但它似乎並沒有在所有

來源

2014-06-30 Himmators

你要聽取和反應模型（該元素的替代），只要有可能，您可以在指令中$watch將火每當模型更改時（無論如何變化）：

scope.$watch(attrs.ngModel, function(){ 
    expand(element); 
});

你甚至不需要事件處理程序了。您唯一需要做的其他事情是將ng-trim="false"添加到文本區域。否則，模型將忽略空白（包括您鍵入的任何新行）。

Demo

來源

2014-06-30 19:40:56 Jerrad

觸發你可以聽在ngModel變化做somethign這樣的：

scope.$on("ngModel", function(){ 
    //this will fire when ng model changes 
}, true);

來源

2014-06-30 18:29:04

它似乎沒有觸發，我是否需要添加範圍或運行它在其他地方或東西？ – Himmators

你應該傾聽變化對ngModel這樣：

// here "model" is linked to ng-model property 
scope.$watch("model", function() { 
    console.log("Changed"); 
    expand(element); 
});

雖然你當然可以看'tasks.tasks'，它會限制你的指令，只是一個用例的用處。

來源

2014-06-30 20:08:22 b0nyb0y

如何在指令中偵聽textarea中的更改？

回答

相關問題