Question

我对Angular有一个问题，似乎没有做双向绑定。我对这些东西很新，所以我可能会看一些东西。这是我的代码。

查看：

<ion-view view-title="Update challenge">
<ion-content>

<ion-list>
  <ion-item>
    Current total
    <span class="item-note">
      {{challengeProgress.current_total_reps}}
    </span>
  </ion-item>

  <ion-item>
    Ultimate goal
    <span class="item-note">
      {{challengeProgress.total_reps}}
    </span>
  </ion-item>

  <ion-item>
    Todays goal
    <span class="item-note">
      {{todaysReps}}
    </span>
  </ion-item>

  <ion-item>
    Left for today
  </ion-item>


  <ion-item>
    <label class="item item-input">
      <input type="text" placeholder="Performed reps" ng-model="reps">
    </label>
  </ion-item>
  <div class="button button-calm button-block" ng-click="updateProgress()">Update!</div>
  Reps {{reps}}
</ion-list>

控制器：

$scope.reps;
$scope.updateProgress = function(reps){
  console.log(reps);
  SendToAPI.updateChallenge(u_id, c_id, toAdd);
}

reps似乎未定义且{{reps}}也未更新。

Answer 1

无需将reps作为参数传递。您可以$scope.updateProgress函数访问$scope.reps。

HTML：

<div class="button button-calm button-block" ng-click="updateProgress()">Update!</div>

JS：

  $scope.updateProgress = function(){
  console.log($scope.reps);
  //SendToAPI.updateChallenge(u_id, c_id, toAdd);
}

请检查Plunker

Answer 2

Bas似乎你没有1.声明一个应用程序和2.用你的控制器包装你的HTML。没有控制器，HTML和控制器之间没有链接。正如您所看到的那样，双向绑定不需要ng-click，因为它已更新为HTML以及控制器

以下是您的代码的基本工作示例：

https://plnkr.co/edit/w2B7iRcaoTiOCdL1JJTX?p=preview

   <!DOCTYPE html>
   <html ng-app="plunker">

  <head>
  </head>

  <body ng-controller="MainCtrl">
      <h1>Hello Plunker!</h1>
      <label class="item item-input">Label</label>
      <input type="text" placeholder="Performed reps" ng-model="name" />
      // BUTTON NOT NEEDED for update but can used for some other event 
      <button class="button button-calm button-block" ng-click="updateProgress()">Update!</button>
      <p>Hello {{name}}!</p>
    </div>
  </body>

    </html>

脚本：

(function(angular) {
  'use strict';
var myApp = angular.module('myApp',[]);

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.name = "Hello World";

  $scope.updateProgress = function(val){
    console.log(reps);
      $scope.name = val;
  };

}]);

})(window.angular);

Answer 3

这似乎是与离子骨架相关的问题的组合。

第一个问题是ion-item元素实际上创建了子范围，并且因为reps是原始而不是对象，所以由于原型继承，它在其他范围内不可见。通过确保reps与将消耗它的函数位于同一ion-item内，可以很容易地解决这个问题，尽管也可以通过在$scope，{{$scope.workout.reps上创建一个对象来解决这个问题。 1}}例如，它与继承没有相同的问题。

第二个问题似乎是函数本身永远不会实际触发。从表面上看，这似乎是离子中CSS的某种问题，但可以通过将div更改为ion-item来轻松修复。

以下显示了对视图的工作更改：

<ion-item>
  <label class="item item-input">
    <input type="text" placeholder="Performed reps" ng-model="reps">
  </label>

  <ion-item class="button button-calm button-block" 
            ng-click="updateProgress(reps)">Update!</ion-item>
  Reps {{reps}}
</ion-item>

http://codepen.io/Claies/pen/EPEBZN

请注意，在codepen中，我记录了传入的reps和$scope.reps，以证明存在继承问题。

Angular不设置数据绑定

3 个答案: