角度/イオンng-クリックしてもビューは更新されませんが、モデルでは更新されます

ポール・フィッツジェラルド

を使用すると、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の答えとイオンのウェブページ上のそれらを読み通しましたが、運がありませんでした。私が読んだことから、子スコープに値を設定することと関係があるのではないかと思いますが、それを壊しているのですが、確信が持てません。

誰か助けてもらえますか?

SkyWriter

その理由は、一度これを行うと、次のようになると思います。

$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]

編集
0

コメントを追加

0

関連記事

分類Dev

データバインドされたComboBoxItemをクリックしても、親ComboBoxは更新されません

分類Dev

ng-clickでチェックボックスをクリックしても、モデルは更新されません

分類Dev

Vuejs-インデックス値を更新しても2番目のコンポーネントのビューは更新されません

分類Dev

スクロールを開始するまで、リサイクラービューは更新されません

分類Dev

クリックしてもモバイルナビゲーションバーは表示されません

分類Dev

Vueルーターを使用してビュー内に埋め込まれたルーターリンクをクリックしても、ルータービューは更新されません

分類Dev

空のリサイクラービューが新しいデータで更新されていません

分類Dev

ボタンをクリックしてもSQLServerテーブルは更新されません

分類Dev

エクステンダーを動的に再バインドしてもビューは更新されません

分類Dev

リサイクラー ビューからアイテムを削除しても、リサイクラー ビューは更新されませんか?

分類Dev

Wordpressモバイルナビゲーションメニュー:メニューはiPhoneやその他のモバイルデバイスでクリックすると表示されますが、iPadでは表示されません

分類Dev

オブジェクトがバックエンドで変更されても、バックボーンモデルは変更されません。

分類Dev

github.ioのファイルは、2日後、キャッシュをクリーンアップした後でも更新されません

分類Dev

コンテナのイメージが最新のものに更新された後、Postgresコンテナが `データベースファイルはサーバーと互換性がありません`でクラッシュします

分類Dev

React-native Drawer Navigatorは開きますが、アイテムをクリックしてもビューは変更されません

分類Dev

ページのカスタム更新ボタンをクリックしても、テーブルのデータが更新されません

分類Dev

ビットマップをリサイクルしてもメモリは解放されません

分類Dev

モデルにオブジェクトを追加しますが、domは更新されません

分類Dev

メインスレッドでリロードが呼び出されてもUITableは更新されません

分類Dev

バインドしてもTabLayoutカスタムタイトルビューは更新されません

分類Dev

スクリーンショットはAndroidビットマップで更新されていません

分類Dev

スタックビルドの結果、「出力は-oでリダイレクトされましたが、メインモジュールがないため、出力は生成されません」という結果になります。

分類Dev

角度フォームコントロールは次のクリックまで更新されません

分類Dev

マウントされていないコンポーネントの状態更新を反応させます。これは何もしませんが、アプリケーションのメモリリークを示しています

分類Dev

カスタムセルファクトリを使用するリストビューは、アイテムが削除された後に更新されません

分類Dev

Angular2でActivatedRouteParamsをサブスクライブしても、ビューテンプレートは更新されません

分類Dev

AngularJSデータは、2番目のボタンをクリックするまで更新されません

分類Dev

MongoDB TTLインデックスはドキュメントを削除していますが、使用法は更新されていません

分類Dev

SwiftUIで(UIKitを使用して)シェイクジェスチャからEnvironmentObjectを設定しても、ビューは更新されません

Related 関連記事

  1. 1

    データバインドされたComboBoxItemをクリックしても、親ComboBoxは更新されません

  2. 2

    ng-clickでチェックボックスをクリックしても、モデルは更新されません

  3. 3

    Vuejs-インデックス値を更新しても2番目のコンポーネントのビューは更新されません

  4. 4

    スクロールを開始するまで、リサイクラービューは更新されません

  5. 5

    クリックしてもモバイルナビゲーションバーは表示されません

  6. 6

    Vueルーターを使用してビュー内に埋め込まれたルーターリンクをクリックしても、ルータービューは更新されません

  7. 7

    空のリサイクラービューが新しいデータで更新されていません

  8. 8

    ボタンをクリックしてもSQLServerテーブルは更新されません

  9. 9

    エクステンダーを動的に再バインドしてもビューは更新されません

  10. 10

    リサイクラー ビューからアイテムを削除しても、リサイクラー ビューは更新されませんか?

  11. 11

    Wordpressモバイルナビゲーションメニュー:メニューはiPhoneやその他のモバイルデバイスでクリックすると表示されますが、iPadでは表示されません

  12. 12

    オブジェクトがバックエンドで変更されても、バックボーンモデルは変更されません。

  13. 13

    github.ioのファイルは、2日後、キャッシュをクリーンアップした後でも更新されません

  14. 14

    コンテナのイメージが最新のものに更新された後、Postgresコンテナが `データベースファイルはサーバーと互換性がありません`でクラッシュします

  15. 15

    React-native Drawer Navigatorは開きますが、アイテムをクリックしてもビューは変更されません

  16. 16

    ページのカスタム更新ボタンをクリックしても、テーブルのデータが更新されません

  17. 17

    ビットマップをリサイクルしてもメモリは解放されません

  18. 18

    モデルにオブジェクトを追加しますが、domは更新されません

  19. 19

    メインスレッドでリロードが呼び出されてもUITableは更新されません

  20. 20

    バインドしてもTabLayoutカスタムタイトルビューは更新されません

  21. 21

    スクリーンショットはAndroidビットマップで更新されていません

  22. 22

    スタックビルドの結果、「出力は-oでリダイレクトされましたが、メインモジュールがないため、出力は生成されません」という結果になります。

  23. 23

    角度フォームコントロールは次のクリックまで更新されません

  24. 24

    マウントされていないコンポーネントの状態更新を反応させます。これは何もしませんが、アプリケーションのメモリリークを示しています

  25. 25

    カスタムセルファクトリを使用するリストビューは、アイテムが削除された後に更新されません

  26. 26

    Angular2でActivatedRouteParamsをサブスクライブしても、ビューテンプレートは更新されません

  27. 27

    AngularJSデータは、2番目のボタンをクリックするまで更新されません

  28. 28

    MongoDB TTLインデックスはドキュメントを削除していますが、使用法は更新されていません

  29. 29

    SwiftUIで(UIKitを使用して)シェイクジェスチャからEnvironmentObjectを設定しても、ビューは更新されません

ホットタグ

アーカイブ