0

我让 ng-class 很好地处理了控制器 $scope 上定义的所有内容：

<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 回答