Angular 不设置数据绑定答案

【问题标题】：Angular doesn't set databindingAngular 不设置数据绑定
【发布时间】：2016-01-27 06:05:34
【问题描述】：

我对 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}} 也没有更新。

【问题讨论】：

控制器中的用户$scope.reps。
向我们展示您的控制器
ion-item 是ion-list 的子代，这意味着您有多个item，每个都可能有一个reps 模型，但您引用reps 在ion-item之外，暗示只有一个。
那么还是没有更新
看来div 与ng-click 和表达式需要在ion-item 内移动，但您还没有真正显示足够的页面的其他部分这是关于任何进一步的上下文。我非常怀疑你的观点只是这些元素。

标签： angularjs ionic-framework

【解决方案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

【讨论】：

我一开始也是这么想的，但不知何故没用

【解决方案2】：

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

第一个问题是ion-item 元素实际上创建了一个子作用域，并且因为reps 是一个原语而不是一个对象，所以由于原型继承，它在其他作用域中不可见。这很容易通过确保reps 与将使用它的函数在同一个ion-item 中来解决，尽管它也可以通过在$scope、$scope.workout.reps 上创建一个对象来解决，例如，确实如此继承没有相同的问题。

第二个问题似乎是函数本身从未真正触发。从表面上看，这似乎是 ionic 中的 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，以证明存在继承问题。

【讨论】：

这帮了很大的忙，我现在开始工作了！非常感谢！

【解决方案3】：

Bas 似乎没有 1. 声明了一个应用程序和 2. 用 ng-controller 包装了您的 html。没有控制器，您的 HTML 和控制器之间就没有链接。正如您所看到的，使用 2 路绑定不需要 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);

【讨论】：