Двусторонняя привязка внутри директивы AngularJS работает с помощью ng-click, но не работает с window.onclick

Question

Двусторонняя привязка внутри директивы AngularJS работает с помощью ng-click, но не работает с window.onclick

0

Может кто-нибудь объяснить, почему, когда я нажимаю на свой элемент vm.random обновляемый внутри элемента, но когда я нажимаю только на окне, vm.random не обновляется на уровне представления (но console.log печатает новое значение), хотя оба события срабатывают при той же функции vm.update()

<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="1.5.9" src="https://code.angularjs.org/1.5.8/angular.js"></script>
  <script>
    var app = angular.module('test', [])
      .directive('testDir', function() {
        return {
          controllerAs: 'vm',
          bindToController: true,
          controller: function() {
            var vm = this;
            vm.random = Math.random();

            window.onclick = function() {
              vm.update();
            };

            vm.update = function() {
              vm.random = Math.random();
              console.log(vm.random);
            };
          },
          template: '<div ng-click="vm.update()">Random number after click {{vm.random}}<input ng-model="vm.random"/></div>'
        }
      });
  </script>
</head>

<body ng-app="test">
  <h1>My directive</h1>
  <test-dir></test-dir>
</body>

</html>

Что я должен изменить в этом фрагменте для возможности обновления vm.random после того, как window.onlick изменил vm.random?

vologa 18 авг. 2016, в 13:20

Источник

Теги:

javascript

angularjs

angular-directive

two-way

1 ответ

Ещё вопросы

Thor Jacobsen · Accepted Answer · 2016-08-18T07-37-00.000Z

Попробуй это:

window.onclick = funciton(){
    $scope.$apply(function(){
        vm.update();
    });
}

Не забудьте ввести $ scope в контроллер

Несмотря на то, что vm.random не находится непосредственно на вашем $scope, угловатое все еще должно знать, что оно изменилось. вызов $scope.$apply вручную позаботится об этом.

Причина, по которой он работает с ng-click заключается в том, что угловые директивы автоматически обрабатывают $scope.$apply ing

для $ scope. $ apply +1 plnkr.co/edit/fy0yPf4DyyOjGbchA4Eg?p=preview
Спасибо за превращение в пример @RJ
Также работайте следующим образом: `window.onclick = funciton () {vm.update (); $ Сфера $ применяется (). } `