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这样请求一个rest 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 结果！尽管如此，这段代码是在没有 ionic 的原生 html、css 和 angularjs 代码上工作的。

谁能告诉我我做错了什么？

Answer 1

找到下面的代码一切正常。 可能的错误

• $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) {
  
    });
  }
  });
  

我尝试在按钮单击后打印您的 URL，如上述代码所示，并且行为符合预期。

LIVE DEMO

Answer 2

我尝试了您的代码，但无法重现您的问题。对不起 :( . 只是一个加号，无论你想改进你的代码，你都可以听从 john papa 的建议https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

Answer 3

您需要使用“点符号”。因为继承，简单的值不会做双向绑定。

请使用以下代码与 ionic 进行双向数据绑定

在控制器中

$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>

Live Example 是here，同样的问题是here。

从here阅读更多详情。

希望这对您有所帮助！