ng-class内的AngularJS工厂在body标签上不起作用答案

【问题标题】：AngularJS factory inside ng-class on body tag not workingng-class内的AngularJS工厂在body标签上不起作用
【发布时间】：2015-05-27 05:37:32
【问题描述】：

被告知创建服务/工厂并在全局控制器上使用它。这是我第一次听到全局控制器。无论如何，我创建了一个名为 Scroll 的工厂并将其注入到我们的 main.controller.js 中。工厂中的函数是 isScrollingEnabled，它返回 true 或 false。另一个函数是 setScrolling，它将变量设置为 true 或 false。默认值设置为 true。

在主控制器里面，我有这段代码

$scope.scrollEnabled = Scroll.isScrollingEnabled();
console.log('value of $scope.scrollEnabled', $scope.scrollEnabled);

该代码在控制台中显示为 true，这很好。

在我的模板上，我就是这样使用它的。我有将滚动设置为 false 的按钮。控制台中的值吐出 false 这很好。

<body ng-class="{ 'scrolling' : scrollEnabled }">

但是，它不起作用。如果我将其更改为下面编写的代码，它可以工作

<body ng-class="{ 'scrolling' : false }">

所以我猜，它不在范围内，尤其是 ui-view 在 index.html 中，而 main.controller.js 和 main.html 将在 ui-view 中加载。

在这之前告诉我，main.controller.js 中的任何范围都不能在 ui-view 之外工作。

那么解决这个问题的方法是什么？

很抱歉没有发布工厂。在这里

  .factory('Scroll', function() {

    var scrollEnabled = true; // i then changed it to false hoping it will work, it didn't

    var ScrollEvent = {
      isScrollingEnabled: function () {
        return scrollEnabled;
      },
      disablePageScrolling: function() {
        scrollEnabled = false;
      }
    };

    return ScrollEvent;
});

【问题讨论】：

您确定它超出了范围吗？你试过做scrollEnabled()吗？你也可以为你的html结构发布一些伪代码，描述有点混乱

标签： angularjs controller factory angular-services ng-class

【解决方案1】：

您将值附加到的控制器的$scope 不会扩展到<body> 元素。相反，您可以将指令组合在一起：

.directive('shouldScroll', function (Scroll) {
  return {
    restrict: 'A',
    link: function ($scope, elem) {
      $scope.$watch(Scroll.isScrollingEnabled, function (n) {
        if (n) {
          elem.addClass('scrolling');
        } else if (n === false) {
          elem.removeClass('scrolling');
        }
      });
    }
  };
});

你可以像这样将它附加到身体上：

<body should-scroll>

【讨论】：

【解决方案2】：

另一种在某些情况下有效的解决方案就是使用 class 而不是 ng-class：

<body class="{{ scrollEnabled ? 'scrolling' : '' }}">

【讨论】：