Angular沒有設置數據綁定

我有一個Angular的問題，它似乎沒有做雙向綁定。我對這個東西很新，所以我可能只是看一些東西。這是我的代碼。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); 
}

代表似乎不定，{{代表}}沒有得到任何更新。

來源

2016-01-27 Bas Pauw

控制器中的用戶'$ scope.reps'。 –

向我們顯示你的控制器 – hgoebl

'ion-item'是'ion-list'的孩子，這意味着你有多個'item'，每個''item''都可以有'reps'模型，但是你引用'reps' *外面的''ion-item'，暗示只有一個。 – Claies

這似乎是相關的離子框架問題的組合。

的第一個問題是，ion-item元素實際上是創建一個子範圍，因爲reps是一種原始的，而不是一個對象，它不是由於原型繼承其他作用域可見。這很容易通過確保reps與將要消耗它的函數在相同的ion-item之內來解決，但是也可以通過在例如$scope,$scope.workout.reps上創建一個與繼承沒有相同問題的對象來解決。

第二個問題似乎是函數本身從未實際觸發。從表面上看，這似乎是CSS在離子中的一些問題，但它很容易通過將div更改爲ion-item來解決。

下面顯示的視圖工作的變化：在codepen

<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

注意，我登錄無論是在reps和$scope.reps傳遞，證明存在繼承的問題。

來源

2016-01-27 08:55:20 Claies

這幫助了很多，我現在得到它的工作！非常感謝！ –

沒有必要通過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

來源

2016-01-27 06:10:57

這就是我一開始以爲的想法，但沒有奏效不知何故 –

巴斯不看起來像你有1聲明的應用程序和2包裹你的HTML與NG-控制器。沒有控制器，HTML和控制器之間沒有任何關聯。正如你可以與2路的結合沒有必要的NG-點擊看，因爲它是更新到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);

來源

2016-01-27 07:54:32 Nolan

Angular沒有設置數據綁定

回答

相關問題