Angular不设置数据绑定 [英] Angular doesn't set databinding

问题描述

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

I have a problem with Angular, it seems to not do the two way binding. I'm pretty new on this stuff, so I might just look over something. Here is my code.

查看：

<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}}未获得更新。

reps seems to be undefined and the {{reps}} doesn't get updated either.

推荐答案

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

This appears to be a combination of issues related to the ionic framework.

第一个问题是 ion-item 元素实际创建子范围，因为 reps 是原始而不是对象，由于原型继承，它在其他范围内不可见。通过确保 reps 位于相同的 ion-item 内，可以轻松解决此问题，因为它将消耗它，虽然它也可以通过在 $ scope ， $ scope.workout.reps 上创建一个对象来解决，例如，这与继承没有相同的问题。

The first issue is that ion-item elements actually create a child scope, and because reps is a primitive rather than an object, it isn't visible in other scopes due to prototype inheritance. This is easily fixed by ensuring that the reps is inside the same ion-item as the function that will be consuming it, though it could also be solved by making an object on $scope, $scope.workout.reps for example, that does not have the same issues with inheritance.

第二个问题似乎是函数本身永远不会实际触发。从表面上看，这似乎是离子中的CSS的某种问题，但通过将 div 更改为离子可以很容易地解决这个问题。 item 而不是。

The second issue seems to be that the function itself is never actually firing. On the surface, this appears to be some sort of issue with the CSS in ionic, but it is easily fixed by changing the div to an ion-item instead.

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

The following shows the working changes to the view:

<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 ，以证明存在继承问题。

Note in the codepen, I log both the passed in reps and $scope.reps, to prove that there is an inheritance issue.

这篇关于Angular不设置数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！