Двухстороннее связывание данных не работает из функции директивной ссылки angularjs - PullRequest
Новая
       10

Двухстороннее связывание данных не работает из функции директивной ссылки angularjs

0 голосов
/ 29 мая 2018

Я пытаюсь использовать переменную, объявленную в директиве 'link: function в представлении директивы html.

Переменная, которую я пытаюсь использовать, это 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).

В принципе, это правильно работает вертикальный слайдер. Единственное, чего не хватает, так это того, что я не могу получить доступтекущий шаг из вида, и я не могу отобразить правильную активную точку «какой слайд в настоящее время выбран». Вот почему мне нужно, чтобы этот шаг int в поле зрения, но я не могу.

Здесь PLNKR демо.

1 Ответ

0 голосов
/ 29 мая 2018

Вы должны использовать $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>
...