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

AngularJS data binding in controller and template operating on different scopes

本文关键字：作用域 操作 AngularJS 数据绑定 控制器      更新时间：2023-09-26

我尝试了许多其他答案中的技巧，但似乎找不到任何有效的方法，也找不到适合我情况的方法。

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

控制器：

.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/

我想如果没有额外的代码，它可能会在这里工作，但这与我在网站上看到的行为完全相同。

--

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

您必须更新您的范围，如下所示：

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

我也更新了你的小提琴：

JSFiddle

相关文章：