Понимание привязки угловых данных

Читая об Угловой привязке данных, наткнулся на советы -

"Из-за характера самого JavaScript и того, как он проходит по значению по сравнению с ссылкой, его считают лучшей практикой в Angular для привязки ссылок в представлениях по атрибуту объекта, а не к самому необработанному объекту".

источник: ng-book

Вопрос: 1. Что это значит - привязка ссылок, а не объектов?

Это сопровождается фрагментом кода.

Код JS:

var module = angular.module("app", []);
//controller uses $timeout
module.controller("MyController", function ($scope, $timeout) {
    var updateClock = function () {
        $scope.clock = {};
        $scope.clock.now = new Date();
        $timeout(function () {
            $scope.clock.now = new Date();
            updateClock();
        }, 1000);
    };
    updateClock();
})

HTML:

<body data-ng-app="app">
<div data-ng-controller="MyController">
    <h5>Hello {{clock.now}}</h5>
</div>
</body>

Вопрос: 2. Если я удалю эту строку $scope.clock.now = new Date(); из-за пределов $timeout - это не работает. Хотя clock.now присваивается объект даты в $timeout. Зачем?

+2
18 дек. '16 в 6:37
источник поделиться
2 ответа

Q1:

  • у него есть кое-что, что нужно сделать с читабельностью, и this контекст и контекст
  • {{this.now}} vs {{clock.now}}
  • привязка данных к области действия может не вызвать цикл дайджеста
  • но даже тогда использование $ scope не разрешает проблемы отладки и полностью читает

Q2:

Вот три примера, я предпочитаю синтаксис Controller1 который упрощает отладку imo:

var module = angular.module("app", []);
module.controller("Controller1", function ($timeout) {
        var vm = this
        vm.clock = {now: 'its loading'};
        vm.now = new Date();
        var updateClock = function () {
            $timeout(function () {
                vm.clock.now = new Date();
                updateClock();
            }, 3000);
        };
        updateClock();
    })

module.controller("Controller2", function ($scope, $timeout) {
        $scope.clock = {now: 'its loading'};
        $scope.now = new Date();
        var updateClock = function () {
            $timeout(function () {
                $scope.clock.now = new Date();
                updateClock();
            }, 3000);
        };
        updateClock();
    })

module.controller("Controller3", function ($timeout) {
        var vm = this
        var updateClock = function () {
            $timeout(function () {
                try {
                  vm.clock.now = new Date();
                } catch(e){
                  vm.clock = {}
                  vm.clock.now = 'oops'
                }
                updateClock();
            }, 3000);
        };
        updateClock();
    })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body data-ng-app="app">
<div data-ng-controller="Controller1 as vm">
    <h6>vm.clock.now {{vm.clock.now}} vm.now {{vm.now}}</h6>
    <h6>vm: {{vm}}</h6>
</div>

<div data-ng-controller="Controller2">
    <h6>$scope.clock.now {{clock.now}} $scope.now {{this.now}}</h6>
    <h6>this is confusing {{this}}</h6>
</div>  
<div data-ng-controller="Controller3 as vm">
    <h1>{{vm.clock.now}}</h1>
    <h6>nice scope: {{vm}}</h6>
</div>

</body>

Также см:

+1
18 дек. '16 в 7:02
источник

Связанные вопросы


Похожие вопросы

Что касается вопроса 2: в основном, если вы удаляете $ scope.clock.now = new Date(); инструкции за пределами обратного вызова $ timeout, между двумя циклами дайджеста, вызванными службой $ timeout, $ scope.clock на самом деле

  • присвоенный пустующему объекту
  • затем привязали свойство now
  • затем снова присваивается пустому объекту

Таким образом, переменная $ scope.clock.now всегда не определена во время дайджест.

Подробные шаги по выполнению выполнения функции обновления приложения запускаются до тех пор, пока цикл дайджеста не будет вызван службой $ timeout:

  • $ scope.clock присваивается пустой объект
  • установлен таймер
  • функция Updateclock завершается
  • таймер истекает, мы вводим функцию обратного вызова таймаута, где:
    • $ scope.clock.now назначается новая Date();
    • updateClock() называется рекурсивно
      • $ scope.clock снова присваивается пустой объект
      • установлен новый таймер
      • updateClock завершает
    • функция обратного вызова завершается
  • на данный момент служба $ timeout запускает дайджест
  • $ scope.clock.now не определен - как и раньше, все началось, и, как и в следующем цикле дайджеста
+1
18 дек. '16 в 10:09
источник

Посмотрите другие вопросы по меткам или Задайте вопрос