两种方式的数据绑定在指令链接函数 angularjs 中不起作用答案

【问题标题】：Two way data binding doesn't work from directive link function angularjs两种方式的数据绑定在指令链接函数 angularjs 中不起作用
【发布时间】：2018-05-29 02:32:39
【问题描述】：

我正在尝试在指令视图 html 中使用指令'link: function 中声明的变量。

我尝试使用的变量是 int 对象，该对象（此对象）声明为名为滑块的 $scope 变量。

我正在尝试显示它：

<div>
    {{ slider.step }}
</div>

打印出来的值是aa : 1，虽然应该是这样，但它并没有改变。它一直是 1 并且它不想重新绑定 :( 虽然我稍后会在代码中更改此值。看看完整的指令代码。我在几个地方更改了它的值：

..in 指令链接函数..

link: function($scope, el) {
  $scope.slider = {
    step: 1,
    changeSlide: function (step) {
      if(step === 1) {
        this.step = 1;
        console.log('changed step to 1: ' + $scope.slider.step);
      }
      if(step === 2) {
        this.step = 2;
        console.log('changed step to 2: ' + $scope.slider.step);
      }
    }
  }
  $timeout(function () {
    var i = 1;
    $scope.slider.changeSlide(i);
    setInterval(function () {
        i++; if(i === 3) i = 1;
        $scope.slider.changeSlide(i);
    }, 5000);
  });
}

我正在更改步骤if(step === 2)。

基本上这是正确工作的垂直滑块。唯一缺少的是我无法从视图中访问当前步骤，也无法显示“当前选择了哪张幻灯片”的正确活动点。这就是为什么我需要了解这一步但我做不到。

Here 是 plnkr 演示。

【问题讨论】：

添加一些 console.logs 以更改其值。也许你启动错误！
我在 this.step = 2 之后添加了 console.log，它做了控制台 2，但它没有在 html 模板中重新呈现。它显示 1 并且不想改变我做错了什么
你能提供一个有效的 plunker 或 codepen 示例吗？
是的，当然。干得好。我没有使用原始源代码，但我创建了最小的问题示例。触发此脚本时查看控制台。 plnkr.co/edit/Ud2wWoD87WqmSRDy9A4i?p=preview 它在 JS 代码中发生了变化，但它没有在模板中重新呈现，这就是为什么这个问题的标题是 2 方式数据绑定不起作用：P

标签： angularjs directive

【解决方案1】：

数据更改后必须使用$timeout(function(){ $scope.$apply(); });

工作示例

angular.module('plunker', []);

function MainCtrl($scope) {
  $scope.hello = 'World';
}

angular.module('plunker').directive('elements', function($timeout) {
  return {
    restrict: 'E',
    scope: {
      name: '='
    },
    template: `<div>
    {{ slider }}
</div>`,
    link: function($scope, el) {

      $scope.slider = {
        step: 1,
        changeSlide: function(step) {
          console.log(11, step)
          if (step === 1) {
            this.step = 1;
            console.log('changed step to 1: ' + $scope.slider.step);
          }
          if (step === 2) {
            this.step = 2;
            console.log('changed step to 2: ' + $scope.slider.step);
          }
          $timeout(function(){ $scope.$apply(); });
        }
      }
      var i = 1;

      $timeout(function() {
        $scope.slider.changeSlide(i);
        setInterval(function() {
          i++;
          if (i === 3) i = 1;
          $scope.slider.changeSlide(i);
        }, 5000);
      });
    }
  };
});

<!doctype html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="style.css">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script>
    document.write("<base href=\"" + document.location + "\" />");
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <elements></elements>
</body>

</html>

【讨论】：

是的，但为什么我必须使用它很奇怪
还有docs.angularjs.org/guide/scope#scope-life-cycle@BT101
我现在在初始化函数时出错，不是在区间内而是通过 ng-click Error: [$rootScope:inprog] $apply already in progress
所以你的问题现在变成了别的问题。搜索这个新的。我也去搜@BT101
让我们continue this discussion in chat.