AngularJS指令link函数中双向绑定失效问题求助

看起来你遇到的核心问题是手动修改$scope.slider.step后，Angular没有自动触发视图更新，导致页面始终显示初始值1。这在AngularJS里是很常见的场景，通常是因为修改操作脱离了Angular的消化循环（Digest Cycle）。

问题根源 #

AngularJS依赖消化循环来检测scope变量的变化并同步更新视图。如果你的step修改操作是在Angular上下文之外执行的（比如用了原生的setTimeout，或者某些非Angular触发的事件），Angular就不会察觉到变量的变化，自然不会更新视图。

具体解决方案 #

根据你的场景，有两种可靠的修复方式：

1. 替换原生定时器为Angular的$timeout服务

Angular的$timeout会自动在回调执行后触发消化循环，不需要手动处理。把你代码里的setTimeout换成$timeout即可：

// 注入$timeout服务到你的指令中
.directive('slider', ['$timeout', function($timeout) {
  return {
    link: function($scope) {
      $scope.slider = { step: 1 };

      // 用$timeout替代setTimeout
      $timeout(function() {
        $scope.slider.step = 2; // 修改后视图会自动更新
      }, 1000);

      // 在changeSlide方法里同理
      $scope.changeSlide = function(newStep) {
        $scope.slider.step = newStep;
        // 如果这里有异步操作，同样用$timeout包裹
      };
    }
  };
}]);

2. 手动触发消化循环

如果你必须使用原生定时器或其他非Angular异步操作，在修改step后手动调用$scope.$apply()来通知Angular更新视图：

.directive('slider', function() {
  return {
    link: function($scope) {
      $scope.slider = { step: 1 };

      setTimeout(function() {
        $scope.slider.step = 2;
        // 手动触发消化循环
        $scope.$apply();
      }, 1000);
    }
  };
});

注意：如果当前已经在消化循环中，调用$scope.$apply()会报错，这种情况下可以改用$scope.$digest()，它只会更新当前scope及其子scope的视图。

额外注意点 #

确保slider是一个对象类型（而不是单独的$scope.step基本类型变量），因为Angular的双向绑定是基于对象引用的，基本类型变量容易出现作用域继承问题（虽然在你的指令独立scope里可能影响不大，但保持对象形式是更稳妥的实践）。

按照上面的方法修改后，你的<div>{{ slider.step }}</div>就能实时显示最新的步骤值了，也能正确标记选中的幻灯片。

内容的提问来源于stack exchange，提问作者BT101