0

私はコントローラー$scopeで定義されたすべてのものでうまく動作するng-classを持っていました：

<body ng-app="thomasApp" ng-controller="AppCtrl">
  <nav hide-show-nav ng-class="{'fixed-nav':fixedNav, 'hide-nav':!showNav}">
   <ul>...</ul>
  </nav>
  ...
</body>

app.controller("AppCtrl", function($scope) {
  $scope.showNav = true;
  $scope.fixedNav = false;

  $scope.toggleNav = function() {
    $scope.showNav = !$scope.showNav;
  }
  ...
});

しかし、工場に切り替えた後、私はそれを機能させることができませんでした:

<body ng-app="thomasApp" ng-controller="AppCtrl">
  <nav hide-show-nav ng-class="{'fixed-nav':nav.fixed, 'hide-nav':!nav.show}">
   <ul>...</ul>
  </nav>
  ...
</body>

app.controller("AppCtrl", function($scope, nav) {
  $scope.nav = nav;
)};

app.factory("nav", function($rootScope) {
  var nav,
      show = true,
      fixed = false;

  nav = {
    show: show,

    fixed: fixed,

    toggleShow: function() {
      nav.show = !nav.show;
    }
    ...
  };

  return nav;
});

ここでフィドル: http://jsfiddle.net/5XqDL/2/

console.log で nav オブジェクトを確認したところ、nav.show 変数と nav.fixed 変数が変更されているはずです。クラスが適用されていないだけです。

何か案は？前もって感謝します。

4

1 に答える 1

1

への変更navは Angular コンテキストの外部で (ウィンドウのイベントのイベント リスナー コールバックから) 行われるため、コールバックの最後でscroll手動で呼び出す必要があります。scope.$apply()

.bind('scroll', function (evt) {
    ...
    scope.$apply();
});

この短いデモも参照してください。

于 2014-05-21T23:00:37.867 に答える