Question

我已尝试过许多其他答案的许多提示，但似乎找不到任何可行的，也不是特定于我的情况。

滚动文档时，它由我的控制器处理，但值的更改不会反映在模板数据绑定中。但是，单击模板中的切换测试链接确实有效，我无法弄清楚如何解决这个问题。

控制器：

.controller('pageNav', ['$interval', '$document', function($interval, $document) {
  var vm = this;

  vm.pub = {};
  vm.pub.isPinned = 0;
  vm.togglePin = togglePin;
  vm.topBuffer = 100;

  vm.pub.isPinned = ($document.scrollTop() >= vm.topBuffer) ? 1 : 0;

  $document.on('scroll', function() {

    var dtop = $document.scrollTop();

    if (dtop >= vm.topBuffer && vm.pub.isPinned == 0) {
      vm.togglePin();
    } else if (dtop < vm.topBuffer && vm.pub.isPinned == 1) {
      vm.togglePin();
    }
  });

  function togglePin() {
    vm.pub.isPinned = (vm.pub.isPinned == 1) ? 0 : 1;
  }
}])

模板：

<div ng-controller="pageNav as pNav">
   <div class="subHead stripe" ng-class="{pinnedPageNav: pNav.pub.isPinned}">
      <a href="">Home</a>
   </div>
</div>

这里有效：https://jsfiddle.net/jehqvvtg/4/

我想也许它可以在没有额外代码的情况下工作，但它与我在网站上看到的完全相同的行为。

-

此问题还影响另一个控制器，其中数据通过服务加载（此处没有问题）但不显示在模板中。这个确切的控制器工作在我几个月前编码的网站上，它仍然在那里工作正常但突然我把它放在这里它不再工作了。

Answer 1

您必须像这样更新范围：

$scope.$apply(function() {
    vm.pub.isPinned = (vm.pub.isPinned == 1) ? 0 : 1;
})

我也更新了你的小提琴：

JSFiddle

控制器和模板中的AngularJS数据绑定在不同的作用域上运行

1 个答案: