我正在使用以下版本:
路由配置:
myApp.config(function ($stateProvider) { $stateProvider .state('manager_add', { url: '/managers/add', templateUrl: 'app/components/mdl.role_members/views/add.html', controller: 'ManagerAddController' }); });
控制器配置:
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 an invite to '+ $scope.search_contact +'.'); $ionicLoading.hide(); $state.go('managers'); }); } });
查看配置:
<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"> Some 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 only 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>
如您在视图中看到的,我需要使用$parent以下字段才能使其工作:
$parent
ng-model="$parent.search_contact"
ng-repeat="contact in $parent.filteredContacts = (contactsToBeInvited | filter:search:false)"
ng-click="$parent.selectContact(contact)"
我真的不明白为什么这样做是必要的,因为完整的视图使用的是同一控制器。有人有主意吗?
问题是继承。在控制器的作用域和这些字段之间,有几个新的作用域(离子含量,离子滚动以及其他可能)。
因此,例如ng-model="search_content"。当您在其中写入内容时,它将search_content在ion- content作用域(如果没有看到任何中间作用域,则在中间作用域内)中创建一个变量。由于search_content是在内部创建的ion- content,因此您的控制器将看不到它。
ng-model="search_content"
search_content
ion- content
如果这样做$parent.search_content,它将在父内容(也就是控制器的作用域)中创建它。
$parent.search_content
您不应该这样做,$parent今天的目标是明天,它可以指向其他任何目标(因为您可以在不知道的情况下在两者之间添加新范围,因此$ parent将指向ion-content。
ion-content
因此,除了这样做,您还需要使用对象而不使用原语,例如:
ng-model="form.search_contact"
多亏了这一点,它将form在原型链中寻找对象,直到它在控制器的作用域中找到并使用它(正是您所需要的)。
form
阅读这比我的解释要好一百倍。