Question

我让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变量正在改变它们的位置。只是没有应用这些类。

有什么想法吗？提前谢谢。

Answer 1

由于nav的更改是在Angular上下文之外（来自窗口scroll事件的事件侦听器回调），因此您需要手动调用scope.$apply() at回调的结束。

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

另请参阅此 short demo 。

使用工厂打破了班级

1 个答案: