AngularJs數據綁定不能和離子一起工作

Question

我覺得我缺少一些明顯的輸入文本在離子中。 我使用angular-ui-router這個路線：

$stateProvider.state('findPersons', { 
    url : '/findPersons', 
    templateUrl : 'html/findPersons.html', 
    controller : 'findPersonsCtrl' 
}); 

這是findPersons.html文本輸入代碼：

<div class="bar bar-header item-input-inset"> 
    <label class="item-input-wrapper"> 
    <i class="icon ion-search placeholder-icon"></i> 
    <input type="search" placeholder="Key Word" ng-model="keyWord"> 
    </label> 
    <button ng-click="findPersons()" class="button button-bar-inline">Load</button> 
</div> 

然後我用keyword請求休息API是這樣的：

bockmoiApp.controller("findPersonsCtrl", function($scope, $http) { 
    $scope.results= null; 
    $scope.numberOfResults=-1; 
    $scope.keyWord=""; 

    $scope.findPersons = function() { 

    $http({ 
     method : 'GET', 
     url : 'http://localhost:8080/bockmoi/rest/findPersons?keyWord=' 
      +$scope.keyWord+'&page=0&size=2' 
    }) 
    .then(function successCallback(response) { 
     $scope.results = response.data; 
     $scope.numberOfResults=$scope.results.numberOfElements; 
    },function errorCallback(response) { 

    }); 
    } 
}); 

我想知道爲什麼當我點擊load按鈕時，keyWord值總是被替代發送請求之前，這會導致在遠程數據庫中獲取所有第一個size結果！ Nevetheless，這段代碼正在處理一個沒有離子的本地html，css和angularjs代碼。

有人可以告訴我我做錯了什麼嗎？

Answer 1

你需要使用「點符號」。因爲繼承，簡單的值不會做雙向綁定。

請使用下面的代碼用於與離子

雙向數據綁定在控制器

$scope.test={keyWord : ""}; 

鑑於

<div class="bar bar-header item-input-inset"> 
    <label class="item-input-wrapper"> 
     <i class="icon ion-search placeholder-icon"></i> 
     <input type="search" placeholder="Key Word" ng-model="test.keyWord"> 
    </label> 
    <button ng-click="findPersons()" class="button button-bar-inline">Load</button> 
</div> 

活生生的例子是here &同樣的問題是here。

從here瞭解更多詳情。

希望這個幫助！

Answer 2

找到下面的代碼一切工作正常。 可能的錯誤

• $ http調用中的URL分爲兩行。修理它。

  var app = angular.module('plunker', []); 
  
  app.controller('MainCtrl', function($scope,$http) { 
  $scope.name = 'World'; 
  $scope.results= null; 
      $scope.numberOfResults=-1; 
      $scope.keyWord=""; 
  
      $scope.findPersons = function() { 
      var URL= "http://localhost:8080/bockmoi/rest/findPersons?keyWord="+$scope.keyWord+'&page=0&size=2'; 
      console.log(URL); 
      $http({ 
       method : 'GET', 
       url : 'http://localhost:8080/bockmoi/rest/findPersons?keyWord='+$scope.keyWord+'&page=0&size=2' 
      }).then(function successCallback(response) { 
      $scope.results = response.data; 
      $scope.numberOfResults=$scope.results.numberOfElements; 
  
      },function errorCallback(response) { 
  
      }); 
  } 
  }); 
  

我試圖打印按鈕，點擊後您的網址在上面的代碼，並如預期的行爲。

LIVE DEMO

Answer 3

我想你的代碼，但我無法重現您的問題。對不起:(你是否想要改進你的代碼，你可以按照約翰帕帕的建議https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md