Кнопка Ionic/AngularJS нажимается только снизу, а модель не отображается

Я новичок в Angular, Ionic и программировании в целом. Я пытался разработать небольшое приложение для телефона и столкнулся с двумя проблемами. Вот код моего кода: http://codepen.io/anon/pen/stobI

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Tabs Example</title>

    <link href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.js"></script>
  </head>
  1. Кнопка «Поиск ресторана» на вкладке «Добавить» работает только тогда, когда вы нажимаете на самую нижнюю часть кнопки, и я понятия не имею, почему это происходит.
  2. После нажатия кнопки «Найти ресторан» переменная restaurantquery становится неопределенной в функции searchRest.

Если бы кто-то мог дать мне несколько советов о том, как решить эти проблемы, это было бы здорово


ionic-framework angularjs
person user3716926    schedule 21.08.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я создал рабочий код для этой проблемы, вы можете найти его здесь: http://codepen.io/anon/pen/gBobu. Ниже приведены решения каждой из проблем, с которыми вы столкнулись.

  1. Кнопка для поиска ресторана, похоже, не была полностью нажата из-за того, что над ней находился элемент div, представляющий собой список элементов в ionic framework. После применения класса «элемент» к кнопке она правильно отображалась и снова была доступна для нажатия.

  2. С этой проблемой, похоже, связано то, что $ionicModal имеет область, изолированную от области действия контроллера, когда значение обновляется, оно не обновляется в области $ контроллера. В контроллере я изменил ресторанный запрос на то, что показано ниже.

    myapp.controller('mainCtrl', function($scope, $ionicModal, $http, $scope) { $scope.restaurantQuery = { name: "" }; $scope.searchRest = function() { console.log($scope.restaurantQuery.name); } });

Затем в разметке HTML я изменил свойство, привязанное к входным данным, на это недавно измененное свойство.

<input ng-model="restaurantQuery.name" type="text" placeholder="Search">

Кажется, что объекты в области действия совместно используются легче, чем строковые значения. Однако я не совсем уверен, почему это происходит в angular.

Я надеюсь, что это поможет решить проблемы.

person Marc Harry    schedule 21.08.2014

arrow_upward
0
arrow_downward

Пожалуйста, завершите тег «/ion-content», ранее он был похож на «ion-content», после закрытия он будет работать правильно.

 <script id="add.html" type="text/ng-template">
  <ion-view title="Add A Review">
    <ion-content class="padding">
      <div class="list list-inset">
        <label class="item item-input">
          <textarea type="text" placeholder="Review"></textarea>
        </label>
      </div>
      <button class="button button-positive item" ng-click="findRest()">
        Search for a Restaurant
      </div>
   </ion-content> 
  </ion-view>

</script>
person V2Solutions - MS Team    schedule 21.08.2014