AngularJS가보기에서 선택한 항목을 잃습니다. (데이터 유형의 매개 변수 분실)

Question

보기가 다시로드 될 때 select이 잃어버린 각도 SPA에서 문제가 발생합니다. 선택한 항목 값이 정확합니다. 이것은 일반적인 검색/결과 시나리오이므로 기본적인 것을 놓치고 있어야합니다.

var ProductsController = function($scope, $stateParams, $state, $location, ProductsService) { 
    // data for search operations 
    $scope.searchQuery = { 
     categoryID: $stateParams.categoryID || 0, 
     categories: null 
    }; 

    // init api 
    $scope.init = function() { 
     var categoryResult = ProductsService.getCategories(0); 
     categoryResult.then(function(result) { 
      if (result.isSuccess) { 
       $scope.searchQuery.categories = result.data.Items; 
      } else { 
       $scope.status.isError = true; 
       $scope.status.errorMessage = result.message; 
      } 
     }); 
    } 
} 

ProductsController.$inject = ['$scope', '$stateParams', '$state', '$location', 'ProductsService']; 

:

각도 모듈 (많은 여기 응축)로드 뷰와 컨트롤러를 결정 UI 노선 및 미국, 등 :

var DomainApp = angular.module('DomainApp', ['ui.router', 'ui.bootstrap', 'angularValidator']); 

// add controllers, services, and factories 
DomainApp.controller('ProductsController', ProductsController); 
DomainApp.service('ProductsService', ProductsService); 

var configFunction = function ($stateProvider, $httpProvider, $locationProvider) { 

    $stateProvider 
     .state('productSearch', { 
      url: '/products', 
      views: { 
       "searchView": { 
        templateUrl: '/Templates/products/Search.html', 
        controller: ProductsController 
       } 
      } 
     }) 
     .state('productResults', { 
      url: '/products/Results?categoryID', 
      views: { 
       "searchView": { 
        templateUrl: '/Templates/products/Search.html', 
        controller: ProductsController 
       } 
      } 
     }) 
    } 
    configFunction.$inject = ['$stateProvider', '$httpProvider', '$locationProvider']; 

    DomainApp.config(configFunction); 

제품 컨트롤러 설정

제품 서비스 :

var ProductsService = function ($http, $q) { 
    this.getCategories = function (categoryID) { 
     var deferredObject = $q.defer(); 
     var results = { 
      isSuccess: true, 
      message: '', 
      data: null 
     } 

     $http.get('/api/categories/list/100' + ',' + categoryID). 
      success(function (data) { 
       results.data = data; 
       deferredObject.resolve(results); 
      }). 
      error(function (data, status, headers, config) { 
       results.isSuccess = false; 
       results.message = 'Could not get Category list:'; 
       for (var i = 0; i < data.length; i++) { 
        results.message = results.message + ' ' + data[i].Message; 
       } 
       deferredObject.resolve(results); 
      }); 

     return deferredObject.promise; 
    }; 
} 

ProductsService.$inject = ['$http', '$q']; 

그리고 제품 검색 템플릿 (보기) : 뷰에서

<div class="container-fluid searchbar" data-ng-init="init()"> 
    <h2>Product Search</h2> 
    <div class="row top5"> 
     <div class="col-md-5"> 
      <label for="category">Category:</label><input type="text" class="form-control" maxlength="40" id="categoryID" ng-model="searchQuery.categoryID" /> 
      <select class="form-control" name="category" ng-model="searchQuery.categoryID"> 
       <option value="0">Any</option> 
       <option ng-repeat="item in searchQuery.categories" value="{{item.CategoryID}}">{{item.CategoryName}}</option> 
      </select> 
     </div> 
    </div> 
    <div class="row top15"> 
     <div class="col-md-12"> 
      <a class="btn btn-default" ui-sref="productResults({categoryID: searchQuery.categoryID})">Search</a> 
     </div> 
    </div> 
</div> 

는, 선택 값은 data-ng-init="init()"에 의해 채워집니다, 그리고 input 상자와 select 드롭 다운은 같은 모델 항목 ng-model="searchQuery.categoryID" 연결되어 있습니다.

범주를 선택한 후에보기를로드하면 값이 손실되고 선택 항목이 "모두"로 되돌아갑니다. 텍스트 상자에 올바른 값이 선택되어 있습니다. 의 값을 변경하면 select에서 선택한 항목이 변경되므로 select이 모델 요소에 바인딩 되었음이 확인되었습니다. 다시로드하면 깜박임 select이 표시되고 잠시 동안 선택한 값이있는 것처럼 보입니다.

편집 : 요약하면 선택한 카테고리는 select에서 선택한 항목으로 "손실"됩니다. 선택한 카테고리 값이 url 및 input 텍스트 상자에 올바르게 나타납니다. 선택 옵션 값이 이고 item 범주 객체가 아니기 때문에 참조 비교 문제가 아닙니다.

내가 뭘 잘못하고 있니? 어떻게 select을 바운드 값에서 분리 할 수 ​​있습니까? 그리고/또는 바인딩을 잘못 설정하고 있습니까?

덧붙여, 나는 또한 select을 설정하는 ng-options 대신 ng-repeat을 시도했지만이 경우에 input의 값이 어떤 영향을했던 변경하지 않습니다.

Answer 1

이 문제는 실제로 $stateParams에 bug이며 정수의 데이터 형식이 손실되어 문자열이됩니다. 이 문제는 Angular UI Router 0.2.12 버전에서 수정되었지만 여전히 0.2.13에서이 문제를보고 있으며 매개 변수 값을 다시 숫자로 변환하여 문제를 해결해야합니다.

는 Number 기능 업데이트 된 제품 컨트롤러 :

var ProductsController = function($scope, $stateParams, $state, $location, ProductsService) { 
    // data for search operations 
    $scope.searchQuery = { 
     categoryID: Number($stateParams.categoryID) || 0, 
     categories: null 
    }; 

    // init api 
    $scope.init = function() { 
     var categoryResult = ProductsService.getCategories(0); 
     categoryResult.then(function(result) { 
      if (result.isSuccess) { 
       $scope.searchQuery.categories = result.data.Items; 
      } else { 
       $scope.status.isError = true; 
       $scope.status.errorMessage = result.message; 
      } 
     }); 
    } 
} 

ProductsController.$inject = ['$scope', '$stateParams', '$state', '$location', 'ProductsService'];