AngularJs Datenbindung funktioniert nicht mit Ionen

Question

Ich fühle mich wie ich etwas offensichtlich mit einigen Eingabetext in ionischen fehlt. Ich verwende angular-ui-router mit dieser Route:

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

Dies ist der Texteingabecode in 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> 

Dann benutze ich die keyword ein Rest-API auf diese Weise zu fordern:

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) { 

    }); 
    } 
}); 

Und ich wundere mich, warum, wenn ich die load Taste drücken, der keyWord Wert immer durchersetzt wirdbevor die Anfrage gesendet wird, was das Abrufen aller ersten size Ergebnisse in der entfernten Datenbank zur Folge hat! Trotzdem arbeitet dieser Code an einem nativen html, css und angularjs code ohne ionic.

Kann mir jemand sagen, was ich falsch mache?

Answer 1

Sie müssen "Punktnotation" verwenden. Wegen der Vererbung, einfache Werte werden keine Zwei-Wege-Bindung

.

Bitte benutzen Sie den folgenden Code für Zweiweg-Daten

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

In Ansicht mit ionischen

In Controller Bindung

<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-Beispiel sind here & gleichen Ausgabe sind here.

Lesen Sie mehr Details von here.

Hoffe, dass dies gut helfen!

Answer 2

Finden Sie den folgenden Code alles funktioniert gut. Mögliche Fehler

• URL im Aufruf $ http ist in zwei Zeilen. Repariere es.

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

Ich habe versucht, die URL nach dem Button klicken, wie im obigen Code Druck und das Verhalten als erwartet.

LIVE DEMO

Answer 3

habe ich versucht, den Code, aber ich konnte das Problem nicht reproduzieren. Entschuldigung :(. Nur ein Plus, ob Sie möchten, dass Sie Code verbessern, können Sie folgen John Papas Ratschläge https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md