7

この問題に関するスレッドを読んだことがあります。ビューはAngularJSで更新されていませんが、単純な例に適用する方法を理解できません。

私はこの機能を持っています:

function MyPageView($scope) {
  var myModel = new MyModel();
  $scope.myModel = myModel;
}

コードの他の場所で更新された場合myModel(ユーザーがクリック、対話、XHRリクエストを送信した場合)、ビューは更新されません。$ applyで何かをする必要があることは理解していますが、どこでどのように行うのかわかりませんでした。

この単純なユースケースでこの問題を解決するにはどうすればよいか、誰かに説明してもらえますか?

私のモデルは次のようになります(質問に必要な場合)-内部にAngularJSコードがありません:

var MyModel = function() {
  var _this = this;
  ...
  _this.load = function(){...};
  _this.updateModel = function(){...};
  ...
  return _this;
}

JSfiddleの例を追加する:http: //jsfiddle.net/DAk8r/2/

4

4 に答える 4

10

モデルを更新した後、コントローラー内で$scope。$apply()を試してください

于 2013-01-17T08:08:27.083 に答える
9

問題の核心は、AngularJSを非常に伝統的な「jQuery-soupスタイル」のJavaScriptパターンと混合しようとしていることです。Angularでは、DOMの操作とインタラクション(クリックを含む)を行うために常にディレクティブを使用する必要があります。この場合、コードは次のようになります。

<div ng-controller="myModelCtrl">
  <div>Number is {{myModel.number}}</div>
  <a ng-click="myModel.updateNumber()">Update Number</a>
</div>
function myModelCtrl($scope) {
   var myModel = new MyModel();
   $scope.myModel = myModel;
}

function MyModel() {
  var _this = this;
  
  _this.number = 0;
  
  _this.updateNumber = function() {
     _this.number += 1;
    alert('new number should display ' + _this.number);
  }
  
  return _this;
}

jQueryで手動ハンドラーを設定する代わりに、clickAngularの組み込みng-clickディレクティブを使用する方法に注目してください。これにより、Angularスコープのライフサイクルに結び付け、ユーザーがリンクをクリックしたときにビューを正しく更新できます。

これがAngularJSFAQからの引用です; 私はあなたが習慣を破るのを助けるかもしれない部分を太字にしました。

一般的な落とし穴

Angularサポートチャネル(Freenodeの#angularjs)には、Angularの新規ユーザーが陥る多くの落とし穴があります。このドキュメントは、難しい方法を見つける前にそれらを指摘することを目的としています。

DOM操作

jQueryを使用してコントローラーのDOMを変更しようとするのをやめます。本当に。これには、要素の追加、要素の削除、コンテンツの取得、表示と非表示が含まれます。組み込みのディレクティブを使用するか、必要に応じて独自のディレクティブを作成して、DOM操作を実行します。機能の複製については、以下を参照してください。

習慣を破るのに苦労している場合は、アプリからjQueryを削除することを検討してください。本当に。Angularには$httpサービスと強力なディレクティブがあり、ほとんどの場合不要です。AngularにバンドルされているjQLiteには、Angularディレクティブの記述、特にイベントへのバインドで最も一般的に使用される機能がいくつかあります。

最後に、この手法を使用して作業する例を次に示します。http: //jsfiddle.net/BinaryMuse/xFULR/1/

于 2013-01-17T08:45:51.123 に答える
1

http://jsfiddle.net/zCC2c/

あなたの問題は2つあります。

1)DOMElements(クリックハンドラー内の$(this)によって返されるaなど)にはデフォルトの防止機能がないため、jsfiddleに構文エラーがありました。実際にはイベントを渡す必要がありました(構文上の軽微な問題)。

2)次のように変数定義をコントローラースコープ内に配置します。

 function MyCtrl($scope){
     $scope.foo = foo;
 }

クラスのインスタンス化ごとに1回実行されるようにします。

あなたが欲しいものは:

 function MyCtrl($scope){
      $scope.someAngularClickHandler=function(){
         $scope.foo = foo;
      }
 }

そしてあなたのリンクで

   <a href="foo" id="bar" ng-click="someAngularClickHandler()">

より網羅的なコードサンプルについては、リンクされたjsfiddleを参照してください。

理論の概要は、ここでの最初の講演で見つけることができます。

http://www.youtube.com/watch?feature=player_embedded&v=VxuN6WO3tIA

于 2013-01-17T08:29:59.697 に答える
0

Angularアプリでは、モデルは通常、個別のJavaScriptオブジェクトとしてではなく、$scopeに実装されることがあります。これは、その方法を示すアプリの書き直しです

function myModelCtrl($scope) {
  $scope.number = 0;
  $scope.updateNumber = function () {
    $scope.number += 1;
    alert('new number should display ' + $scope.number);
  }
}

HTML:

<div ng-controller="myModelCtrl">
  <div>Number is {{number}}</div> 
  <a ng-click="updateNumber()">Update Number</a>
</div>

これがjQueryのないフィドルで、Angularのフィドルを設定する「通常の方法」を示しています。

于 2013-01-17T16:30:37.637 に答える