21

私は最近、取り組んでいるプロジェクトに ember.js ではなく AngularJS を選択しましたが、これまでのところ非常に満足しています。ember の優れた点の 1 つは、自動データ バインディングによる "計算されたプロパティ" のサポートが組み込まれていることです。以下のコードを使用してAngularで同様のことを達成できましたが、それが最善の方法であるかどうかはわかりません.

// Controller
angular.module('mathSkills.controller', [])
  .controller('nav', ['navigation', '$scope', function (navigation, $scope) {
    // "Computed Property"
    $scope.$watch(navigation.getCurrentPageNumber, function(newVal, oldVal, scope) {
      scope.currentPageNumber = newVal;
    });
    $scope.totalPages = navigation.getTotalPages();
  }]);

// 'navigation' service
angular.module('mathSkills.services', [])
  .factory('navigation', function() {
    var currentPage = 0,
        pages = [];

    return {
      getCurrentPageNumber: function() {
        return currentPage + 1;
      },
      getTotalPages: function() {
        return pages.length;
      }
    };
  });

// HTML template
<div id=problemPager ng-controller=nav>
  Problem {{currentPageNumber}} of {{totalPages}}
</div>

上記のコードで実現される currentPage、サービスの が変更されるたびに UI を更新したいと考えています。navigation

これはAngularJSでこの問題を解決する最良の方法ですか? このように使用すると、(重大な) パフォーマンスへの影響はあり$watch()ますか? このようなことは、カスタム イベントと$emit()またはを使用してより適切に達成でき$broadcast()ますか?

4

3 に答える 3

24

私は答えを見つけたと思います。この例は、次のように大幅に単純化できます。

// Controller
angular.module('mathSkills.controller', [])
  .controller('nav', ['navigation', '$scope', function (navigation, $scope) {
    // Property is now just a reference to the service's function.
    $scope.currentPageNumber = navigation.getCurrentPageNumber;
    $scope.totalPages = navigation.getTotalPages();
  }]);

// HTML template
// Notice the first binding is to the result of a function call.
<div id=problemPager ng-controller=nav>
  Problem {{currentPageNumber()}} of {{totalPages}}
</div>
于 2012-06-26T22:30:07.507 に答える
5

ECMAScript 5 では、次のようなこともできることに注意してください。

// Controller
angular.module('mathSkills.controller', [])
  .controller('nav', function(navigation, $scope) {
    $scope.totalPages = navigation.getTotalPages();
    Object.defineProperty($scope, 'currentPageNumber', {
      get: function() {
        return navigation.getCurrentPageNumber();
      }
    });
  ]);

//HTML
<div ng-controller="nav">Problem {{currentPageNumber}} of {{totalPages}}</div>
于 2015-11-03T01:58:43.930 に答える