Milind
Milind

Reputation: 1955

angularjs scope for ngModel is not working as expected

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

Upvotes: 0

Views: 719

Answers (1)

tasseKATT
tasseKATT

Reputation: 38490

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

Upvotes: 1

Related Questions