2017-12-15 13 views
0

$ http.get 호출을 통해 데이터를 수집 할 때 bs3-typeahead의 작동 예제를 만들려고하지만 그럴 수 없습니다. http.get 메서드 외부에서 소스를 할당 할 때 작동하도록 설정할 수 있지만 내부에서는 지정할 수 없습니다.http.get을 사용하는 선행 사용 예제

내가 여기에 무엇을 놓치고 있는지 전혀 모른다. 어떤 도움이라도 대단히 감사하겠습니다. 여기 내 코드가 있는데, http가 아닌 버전이 작동합니다. plunker 또는 아래에서 복사하십시오. 감사

<!DOCTYPE html> 
<html>  
<head> 
    <!-- GOOD ORDER --> 
    <!-- JQUERY  --> 
    <script data-require="[email protected]" data-semver="1.10.1" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <!-- TPEAHEAD --> 
    <script src="https://rawgithub.com/bassjobsen/Bootstrap-3-Typeahead/master/bootstrap3-typeahead.js"></script> 
    <!-- ANGULARJS --> 
    <script src="https://code.angularjs.org/1.4.8/angular.js"></script> 
    <!-- UI-BOOTSTRAP-TPLS --> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script> 
    <!-- ANGULAR-BOOTSTRAP-TYPEAHEAD  --> 
    <script src="https://rawgithub.com/davidkonrad/angular-bootstrap3-typeahead/master/angular-bootstrap3-typeahead.js"></script> 
    <!-- BOOTSTRAP --> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
</head> 
<body> 
    <div ng-app="bootstrap3-typeahead-example"> 
    <div ng-controller="sampleCtrl"> 
     <div> 
     <h2>bootstrap3-typeahead example</h2> 
     <h4>selected value: {{ value }}</h4> States: 
     <input type="text" bs3-typeahead bs3-source="source" ng-model="value" /> 
     <br /> States (from http.get): 
     <input type="text" bs3-typeahead bs3-source="source_http" ng-model="http_value" /> 
     </div> 
    </div> 
    </div> 
    <script> 
    (function(angular) { 
     'use strict'; 
     angular.module('bootstrap3-typeahead-example', ['ui.bootstrap', 'bootstrap3-typeahead']). 
     controller('sampleCtrl', ['$scope', '$http', function($scope, $http) { 

     $scope.HttpTest = function() { 
      $http.get('https://jsonplaceholder.typicode.com/posts') 
      .then(
       function(data) { 
       $scope.source_http = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 
        'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 
        'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 
        'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 
        'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 
        'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 
        'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 
        'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 
        'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming' 
       ]; 
       }, 
       function(error) { 
       console.log(error); 
       }); 
     }; 

     $scope.source = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 
      'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 
      'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 
      'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 
      'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 
      'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 
      'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 
      'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 
      'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming' 
     ]; 

     $scope.value = undefined; 
     $scope.http_value = undefined; 
     $scope.HttpTest(); 
     }]); 
    })(angular); 
    </script> 
</body> 
</html> 

답변

0

당신은 bs3-promise 대신 bs3-source 사용해야합니다. documentation에서

<input type="text" bs3-typeahead bs3-promise="source_http" ng-model="http_value" /> 

: 실제로 약속을 사용하지 않는

BS3 - 약속. bs3-promise를 지정하면 지시문은 대기하고 $ 참조 된 $ scope 변수를 보게됩니다. 변수가 설정되면 선행 기입이 초기화됩니다. 이것은 나중에 bs3-promise에서 언급 한 변수를 나중에 변경하면 새 변수를 소스로 다시 유형을 지정하게된다는 것을 의미합니다. bs3-promise를 사용하면 즉시 소스를 변경할 수 있습니다.