angularjs - Why do I need $parent to enable the function in ng-click when using ion-scroll? -
i using following versions:
- ionic, v1.0.0-beta.14
- angularjs v1.3.6
route configuration:
myapp.config(function ($stateprovider) { $stateprovider .state('manager_add', { url: '/managers/add', templateurl: 'app/components/mdl.role_members/views/add.html', controller: 'manageraddcontroller' }); }); controller configuration:
myapp.controller('manageraddcontroller', function ($scope, $state, $ionicloading, $filter, contactservice, managersservice, rolerequest, rolerequestssentservice, toastrservice) { $scope.role_request = rolerequest.new(); $scope.showcontactsearch = false; $scope.managers = managersservice.collection(); $scope.$watchcollection("managers", function( newmanagers, oldmanagers ) { if(newmanagers === oldmanagers){ return; } $scope.managers = newmanagers; $scope.contactstobeinvited = getnotinvitedcontacts(); }); $scope.contacts = contactservice.collection(); $scope.$watchcollection("contacts", function( newcontacts, oldcontacts ) { if(newcontacts === oldcontacts){ return; } $scope.contacts = newcontacts; $scope.contactstobeinvited = getnotinvitedcontacts(); }); $scope.contactstobeinvited = getnotinvitedcontacts(); function getnotinvitedcontacts() { var notinvited = []; angular.foreach($scope.contacts, function(contact) { if(angular.isobject($scope.managers)) { var results = $filter('filter')($scope.managers, {member_id: number(contact.contact_id)}, true); if (results.length == 0) { this.push(contact); } } else { this.push(contact); } }, notinvited); return notinvited; } $scope.search_contact = ""; $scope.search = function(contact) { if($scope.search_contact === "" || $scope.search_contact.length === 0) { return true; } $scope.showcontactsearch = true; var found = false; if(contact.display_name) { found = (contact.display_name.tolowercase().indexof($scope.search_contact.tolowercase()) > -1); if(found) { return found; } } if(contact.contact.getfullname()) { found = (contact.contact.getfullname().tolowercase().indexof($scope.search_contact.tolowercase()) > -1); if(found) { return found; } } if(contact.contact.email) { found = (contact.contact.email.tolowercase().indexof($scope.search_contact.tolowercase()) > -1); if(found) { return found; } } return found; } $scope.selectcontact = function(contact) { $scope.search_contact = contact.contact.getfullname(); // todo: make dynamic role $scope.role_request.role_id = 4; $scope.role_request.email = contact.contact.email; }; $scope.addrolemember = function(valid) { if($scope.role_request.email === "") { return; } if(!valid) { return; } $ionicloading.show({ template: 'please wait...' }); rolerequestssentservice.add($scope.role_request).then(function(rolejsonresponse){ toastrservice.toastrsuccess('request send', 'we have send invite '+ $scope.search_contact +'.'); $ionicloading.hide(); $state.go('managers'); }); } }); view configuration:
<ion-view view-title="manageradd" > <ion-content class="has-header scroll="true"> <div class="content"> <div class="list"> <div class="item item-border"> <p>some text</p> </div> </div> <form name="managerform"> <div class="list"> <div class="item item-divider"> text </div> <div class="item item-border"> <form name="fillform"> <div class="form-group"> <label class="item item-input item-stacked-label item-textarea"> <span class="input-label border-none">personal message: <span class="text-red required">*</span></span> <textarea name="message" ng-model="role_member.message" required></textarea> </label> <p ng-show="managerform.message.$dirty && managerform.message.$error.required" class="error-message">message required!</p> </div> <div class="form-group"> <label class="item item-input"> <span class="input-label">search on name <span class="text-red required">*</span></span> <input type="text" name="search_contact" ng-model="$parent.search_contact"> </label> <div class="searchresultbox" ng-show="showcontactsearch"> <ion-scroll direction="y" class="scrollarea"> <div class="list"> <a class="item item-border item-avatar pointer" ng-repeat="contact in $parent.filteredcontacts = (contactstobeinvited | filter:search:false)" ng-click="$parent.selectcontact(contact)"> <img src="{{ contact.getimage('thumbnail') }}"> <h2>{{contact.geticonname()}}</h2> <p>city: {{contact.contact.city}}</p> </a> </div> </ion-scroll> <div class="notfound pointer" ng-hide="filteredcontacts.length"> <h3>nobody found</h3> <p>you can search through existing contacts</p> </div> </div> </div> </form> </div> </div> <div class="form-actions"> <button type="submit" class="button button-block regie-button" ng-click="addrolemember(registerform.$valid)"> sent request </button> </div> </form> <p class="text-red" style="text-align:center; font-size:14px; font-weight: 400;">* required</p> </div> </ion-content> </ion-view> as can see in view need use $parent following fields work:
ng-model="$parent.search_contact"ng-repeat="contact in $parent.filteredcontacts = (contactstobeinvited | filter:search:false)"ng-click="$parent.selectcontact(contact)"
i don't understand why necessary because complete view using same controller. have idea?
the problem inheritance. between controller's scope , fields, there several new scopes (ion-content, ion-scroll , others).
so example ng-model="search_content". when write in there, going create search_content variable inside ion-content scope (or intermediary scope if there didn't see). since search_content being created inside ion-content, controller won't see it.
if $parent.search_content create in parent content (aka controller's scope).
you shouldn't that, $parent today, tomorrow can point else (because add new scope in between without knowing $parent point ion-content.
so instead of doing that, need use objects , no primitives, example:
ng-model="form.search_contact" thank that, form object through prototype chain until finds on controller's scope , use (just need).
read this hundred times better explanation.
Comments
Post a Comment