を使用すると、Ionic / Angularでビューを更新するのに深刻な問題が発生しng-click
ます。
以前に同様の問題に遭遇しましたが、このガイダンスに従って解決しました。これは、ボタンが< 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の答えとイオンのウェブページ上のそれらを読み通しましたが、運がありませんでした。私が読んだことから、子スコープに値を設定することと関係があるのではないかと思いますが、それを壊しているのですが、確信が持てません。
誰か助けてもらえますか?
その理由は、一度これを行うと、次のようになると思います。
$scope.user = {
"name": Photos.name
}
あなたは、の値が設定$scope.user.name
値にPhotos.name
でその瞬間を。
ファクトリ内でPhotos.name
行うことによって変更する場合o.name = 'Jim'
、基本的にPhotos.name
は別の文字列オブジェクトを割り当てているのであって、すでに割り当てられているオブジェクトを変更するのではありません$scope.user.name
。
$scope.user = Photos
代わりに次のようなことを行うことで、私の理論を証明できます$scope.user = { ... }
(もちろん、最終的な解決策ではなく、概念の迅速な証明として)。この方法で、$scope.user.name
実際にファクトリname
に保持されている値にアクセスしますPhotos
。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加