1

Я работаю в angularjs проекта, у меня есть одна области текста, который дает мне какой-то результат на search.I хочет, чтобы мой текст область должна быть очищена всякий раз, когда я щелкните в любом месте коды page.My являетсяКак получить текстовую область пустым автоматически при нажатии пользователем в любом месте страницы. Angularjs, Javascript?

<input type="text" ng-model="bigdata" ng-change="ctrl.getData(bigdata);searchDataC =true;" ng-model-options="{debounce: 1000}" placeholder="Search contacts" class="search-input ip-size-roster ng-pristine ng-valid ng-touched" aria-invalid="false" style=""> 
+0

вы можете использовать 'нг-blur' директиву с функцией делать все, что вы хотите Ex.'ng размытости = "ctrl.clearData()"' – FabioG

+0

@FabioG дайте мне проверить и вернемся к вам –

ответ

0

вам следует использовать ng-click = "reset1()", где вы хотите выполнить событие click.

// HTML

<div ng-controller="MainCtrl" ng-click="reset1()"> 
    <textarea id="textarea" ng-model="txt"> 

    </textarea> 

    <div>{{txt}}</div> 

<!--<button id='btn' ng-click="txt=''">Reset textarea</button>--> 
    <button id='btn'>Reset textarea</button> 
</div> 


//js 

var app = angular.module('myApp', []); 

app.controller('MainCtrl', ['$scope', function ($scope) { 
    $scope.txt=''; 

    $scope.reset1 = function() { 
     $scope.txt = ''; 
    }; 
}]); 
+0

Позвольте мне реализовать, а затем вернемся к вам. –

+0

Мой девиз - это текстовое поле, которое автоматически становится пустым, когда я нажимаю в любом месте страницы. Вы нажали кнопку. и спасибо за ваш ответ –

0

В HTML файл

app.factory('clickAnywhereButHereService', function($document){ 
    var tracker = []; 

    return function($scope, expr) { 
    var i, t, len; 
    for(i = 0, len = tracker.length; i < len; i++) { 
     t = tracker[i]; 
     if(t.expr === expr && t.scope === $scope) { 
     return t; 
     } 
    } 
    var handler = function() { 
     $scope.$apply(expr); 
    }; 

    $document.on('click', handler); 

    // IMPORTANT! Tear down this event handler when the scope is destroyed. 
    $scope.$on('$destroy', function(){ 
     $document.off('click', handler); 
    }); 

    t = { scope: $scope, expr: expr }; 
    tracker.push(t); 
    return t; 
    }; 
}); 
app.directive('clickAnywhereButHere', function($document, clickAnywhereButHereService){ 
    return { 
    restrict: 'A', 
    link: function(scope, elem, attr, ctrl) { 
     var handler = function(e) { 
     e.stopPropagation(); 
     }; 
     elem.on('click', handler); 

     scope.$on('$destroy', function(){ 
     elem.off('click', handler); 
     }); 

     clickAnywhereButHereService(scope, attr.clickAnywhereButHere); 
    } 
    }; 
}); 

В файле контроллера

$scope.clickedSomewhereElse = function() { 
    //clear text here 
}; 
+0

позвольте мне реализовать, то вернемся к вам –

0

Если вы используете JQuery где-то в проекте, то вы можете использовать это.

<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
</head> 
 
<script> 
 
$(document).ready(function(){ 
 
$('div').click(function(){ 
 
debugger 
 
    
 
var check= $('#text').val(); 
 
if(check!=""){ 
 
$('#text').val('') 
 

 
} 
 
}); 
 
}); 
 
</script> 
 
<body"> 
 

 
<div class="table-responsive container" style="background:cyan; height:100px"> 
 
<input type="text" id="text" ng-model="bigdata" ng-change="ctrl.getData(bigdata);searchDataC =true;" ng-model-options="{debounce: 1000}" placeholder="Search contacts" class="search-input ip-size-roster ng-pristine ng-valid ng-touched" aria-invalid="false" style=""> 
 

 
    </div> 
 
    </body> 
 
    </html>

Нажмите на DIV в любом месте.

+0

Использование JQuery с angularjs - не очень хорошая практика, хотя я не использую, но спасибо за ответ. Если возможно, тогда это будет реализовано. Код точно то, что я ожидал :) –

1
<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 

<div ng-app="myApp" ng-controller="myCtrl"> 
<input type="text" ng-model="bigdata" ng-change="ctrl.getData(bigdata);searchDataC =true;" ng-model-options="{debounce: 1000}" placeholder="Search contacts" class="search-input ip-size-roster ng-pristine ng-valid ng-touched" aria-invalid="false" ng-blur="clear()"> 



</div> 

<script> 
var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
    $scope.firstName = "John"; 

    $scope.clear = function(){ 
    $scope.bigdata=""; 
    } 
}); 
</script> 

</body> 
</html> 

работает ссылка в W3School http://www.w3schools.com/code/tryit.asp?filename=FCK88MIMAKGW