如何在指令中侦听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中的更改？

回答

相关问题