0

以下のコードでは、

        <label>
            <input type="checkbox" ng-model="showList">
            Show unordered list
        </label>

        <ng-include src="getList()"></ng-include>

$scope.getList()$scope.showListチェックまたはチェック解除による変更時に呼び出されます。ここで$scope.showList、として使用されます。

app3.controller('gListCtrl', function($scope){
    $scope.getList = function(){
        return $scope.showList ? "ulgrocerylist.html" : "grocerylist.html";
    };
});

$scope.getList()の状態が変化したときに呼び出されるのはなぜ$scope.showListですか?

同様のコード、

        <p>
            <button ng-disabled="disableButton">Button</button>
        </p>

        <p>
            <input type="checkbox"
                    ng-model="disableButton">DisableButton
        </p>

disableButton状態が変化しているため、双方向バインディングのためにボタンが無効または有効になるため、私には理にかなっています。

4

2 に答える 2

1

まず第一に、あなたはあなたの質問に少し間違っています。この$scope.getList()関数は、状態の変更時だけでなく、ダイジェスト サイクルごとに呼び出されます。説明させてください。

getListフレームワークには、関数に含まれるコードがまったくわからないためです。コードを静的に分析することは非常に困難で非効率的であるため、コードを静的に分析することはありません。AngularJS の使用方法の性質上getList、完全に異なるコントローラー、サービス、スコープなどの変数に従って の出力を変更する可能性があります。したがって、この出力はダイジェスト サイクルごとに再レンダリングする必要がある場合があります。テンプレートに関数呼び出しがあり、すべてのダイジェストでそれを呼び出して、テンプレートを交換する必要があるかどうかを確認するため、AngularJS はこれを認識します。

次のアプリケーション構造を検討してください。

<div ng-app="testTest">
  <script type="text/ng-template" id="template.html">
    <div>Hello world!</div>
  </script>
  <div ng-controller="templateViewer">
    <div>
      <div ng-include="content()"></div>
    </div>
  </div>
  <div ng-controller="templateChanger">
    <button ng-click="handleClick()">Show / hide content</button>
  </div>
</div>

そしてそれを配線するこのコード：

var app = angular.module('testTest', []);
app.factory('template', function() {
  return {
    show: false
  };
});
app.controller('templateChanger', function($scope, template) {
  $scope.handleClick = function() {
    // toggle showing of template
    template.show = !template.show;
  };
});
app.controller('templateViewer', function($scope, template) {
  // if the result of this function is not re-evaluated on every digest cycle,
  // Angular has no idea whether to show or hide the template.
  $scope.content = function() {
    return template.show ? 'template.html' : '';
  };
});

そのため、フレームワークは、HTML のテンプレートにバインドされたプロパティと関数のこの絶え間ない再評価に依存する必要があります。使用するすべてのデータ構造はプレーンな JavaScript オブジェクトであり、ViewModel 内の何かが変更されたことをフレームワークに明示的に通知しないため ( set()Backbone や Ember などの他のフレームワークでモデルのメソッドを呼び出す場合とは異なります)。 – angular はすべての変数をチェックし、ビューの外観を変更する可能性のあるすべての関数を再実行する必要がありng-include、これらのケースの 1 つです。

于 2016-03-13T03:04:44.017 に答える
-1

ウォッチャーを使用するか、showList 変数の値の変化でイベントを監視できます。

于 2016-03-13T02:06:20.987 に答える