Задержка обновления привязки директивы Angularjs - PullRequest
Новая
       25

Задержка обновления привязки директивы Angularjs

0 голосов
/ 13 октября 2018

У меня проблема с привязкой директивы.В тот момент, когда ng-change срабатывает в обработчике событий, у меня правильное значение в ng-модели prop, но следующая строка - это вызов метода, связанный с контроллером, а свойство обработчика контроллера, которое связано с директивой, имеет предыдущее значение - оно обновляет одномомент спустя.Я предполагаю, что это из-за шагов выполнения дайджест-цикла.Есть ли способ иметь одинаковое значение для директивы и контроллера в данный момент? Пример Plunker .Одним из решений является завершение кода обработчика событий директивы в setTimeout.Есть ли другие, более «угловатые» способы справиться с этим правильно?

Мой html: 

<text-box textvalue="vm.userInput" loadvalue="vm.onLoadValue()"></text-box>

контроллер: 

angular.module("app").controller("mainController", function(){
  var that = this;
  that.onLoadValue = function(){
    console.log(this.userInput);
  }
});

директива: 

angular.module("app").directive("textBox", function(){
  return {
    restriction: "E",
    template: `<input ng-model="textvalue", ng-change="vm.onChange()"/>`,
    scope: {
      textvalue: "=",
      loadvalue: "&"
    },
    controllerAs: "vm",
    controller: function($scope){
      var that = this;
      that.onChange = function(){
        console.log($scope.textvalue);
        $scope.loadvalue();
      }
    }
  }
})

Ответы [ 2 ]

0 голосов
/ 13 октября 2018

Укажите значение как локальное в выражении loadvalue: 

angular.module("app").directive("textBox", function(){
  return {
    restriction: "E",
    template: `<input ng-model="textvalue", ng-change="vm.onChange()"/>`,
    scope: {
      textvalue: "=",
      loadvalue: "&"
    },
    controllerAs: "vm",
    controller: function($scope){
      var that = this;
      that.onChange = function(){
        console.log($scope.textvalue);
        ̶$̶s̶c̶o̶p̶e̶.̶l̶o̶a̶d̶v̶a̶l̶u̶e̶(̶)̶;̶
        $scope.loadvalue({$value: $scope.textvalue});
      }
    }
  }
})

Использование: 

<text-box textvalue="vm.userInput" loadvalue="vm.onLoadValue($value)"></text-box>

Локальное $value с угловым выражением будет текущим значениембез задержки цикла дайджеста.

0 голосов
/ 13 октября 2018

Вместо передачи метода loadvalue в директиву вы можете наблюдать переменную. Рабочий пример 

angular.module("app").controller("mainController", function($scope){
  var that = this;
  that.text="test text";

  $scope.$watch("vm.userInput", function(newValue){
    that.tempValue = newValue;
    console.log(newValue);
  });
});
...