角度/離子ng-click不更新視圖，但在模型中更新

使用ng-click更新Ionic/Angular中的視圖時遇到嚴重困難。角度/離子ng-click不更新視圖，但在模型中更新

我之前遇到類似的問題，但解決了它後面的this指導，這說明如果你的按鈕在<label> ng-click不起作用。

我想達到什麼目的？

我正在開發一個移動應用程序，並希望允許用戶在必要時編輯他們的詳細信息。爲了從最簡單的開始，我開始嘗試實現用戶可以編輯其名稱的功能。在下面的示例中，我試圖在單擊按鈕時更改用戶的名稱。

奇怪的是當我console.log(Photos.name)我得到正確的值，即（scope.user.name = "Jim"），但視圖不反映這種變化。

我的代碼如下：

控制器

.controller('ProfileCtrl', function($scope, Photos) { 

    $scope.user = { 
     "name": Photos.name 
    } 

    $scope.changeName = function() { 
     Photos.changeName(); 
     console.log(Photos.name) 
    }; 

})

廠：

.factory('Photos', function(){ 
    var o = { 
    name : 'James' 
    } 

    o.changeName = function(){ 
    o.name = 'Jim' 
    } 

    return o; 

});

HTML 設置模板

這是該按鈕的profile.html頁面上更新用戶的名稱（見下文）

<ion-view view-title="Settings"> 
     <ion-content> 
     <ion-list> 
     <div class="item item-input"> 
     <span class="input-label">Change Profile Picture</span> 
     <button type="button" ng-click="changeName()">Add</button> 
     </div> 
    </ion-list> 
    </ion-content> 
</ion-view>

配置文件模板

<ion-view view-title="My Profile"> 
    <ion-content class="padding"> 

    <div class="item item-body"> 
    <p class="profile-details"> 
     {{user.name}} 
    </p> 
    </div> 
    </ion-content> 
</ion-view>

我經歷了許多SO閱讀答案和那些離子網頁上，沒有運氣。從我讀過的內容來看，我認爲這可能與在兒童範圍內設置價值有關，但這是打破它的事情，但我無法確定。

任何人都可以幫忙嗎？

來源

2015-05-11 Paul Fitzgerald

我相信原因是，一旦你這樣做：

$scope.user = { 
    "name": Photos.name 
}

您在那一刻的$scope.user.name值設置爲Photos.name值。

當你通過你的工廠內做o.name = 'Jim'改變Photos.name，你基本上分配Photos.name不同的字符串對象，而不是改變已分配給$scope.user.name之一。

你可以用$scope.user = Photos而不是$scope.user = { ... }來證明我的理論（當然，這只是一個概念的快速證明，而不是最終的解決方案）。這樣$scope.user.name實際上將訪問Photos工廠中保存的name值。

來源

2015-05-11 15:44:56 SkyWriter

歡呼，讓我試試 –

不幸的是，這不是它 –

糟糕。我擔心它不會工作。 JavaScript中的字符串是不可變的。 'replace'只會創建一個新的。但是這裏應該說的是：'$ scope.user = Photos'而不是'$ scope.user = {...}'（當然，這只是一個概念的快速證明，而不是最終的解決方案）。 – SkyWriter

角度/離子ng-click不更新視圖，但在模型中更新

回答

相關問題