0

I have created custom directive drop down in angularjs and ionic-framework. In my dropdown items will open in modal popup which is working very good.

But I have kept search input box with clear button input box which is tide up with ng-model='search' and on button ng-click if I put ng-click="search=''" than it will work very good but if I put function and try to delete from directive module than it will not work

In template

<input type="search" ng-model="search" placeholder="select city...">
<button ng-show="search.length" ng-click="clearSearch()" class="customIcon button button-icon ion-close-circled input-button"></button>

In directive module

$scope.clearSearch = function() {
    $scope.search = '';
}

then it will give me error

$scope.search is undefined

I am just very much confuse with $scope thing I also want to know how can i know scope any tool or something

I have also another issue that I kept two custom directive on the same and when first control change its value I want to clear the selection in second directive for that I am doing $watch also but I don't understand How can I do

My plunkr http://plnkr.co/edit/GxM78QRwSjTrsX1SCxF7?p=preview

Milind
  • 1,855
  • 5
  • 30
  • 71

1 Answers1

1

I have no experience with Ionic, but these types of issues are usually related to how prototypal inheritance works in JS and AngularJS.

A great explanation on prototypal inheritance in relation to Angular can be found here.

The issue can usually be solved by moving the property into an object:

$scope.viewModel = {};

$scope.clearSearch = function() {
  $scope.viewModel.search = '';
};

And then use viewModel.search in your HTML where you need it:

<input type="search" ng-model="viewModel.search" placeholder="select city...">

Demo: http://plnkr.co/edit/4SLfA1CjRWB1XazIhj9d?p=info

Community
  • 1
  • 1
tasseKATT
  • 38,470
  • 8
  • 84
  • 65