AngularJS обновить обычную переменную

Question

Я пытаюсь понять, как AngularJS обновляет информацию в браузере. С этой целью я написал очень простой интерфейс, который опирается на логику AngularJS с одним контроллером и одним сервисом.

Интерфейс имеет два поля ввода и три кнопки:

• Поля ввода работают вместе с кнопкой «Добавить текст». Что бы ни находилось в полях ввода, оно объединяется и отображается в строке «Полный текст». Этот результат не отображается в браузере, пока не будет выполнена операция обновления вручную.
• Кнопка «Добавить один», фактически выполняет три операции:
  • Каждый щелчок добавляет «1» к текущему значению целочисленной переменной.
  • Каждый щелчок объединяет «a» с текущей строковой переменной.
  • Каждый щелчок добавляет «1» к текущему значению переменной Array [0].
  • Операция для переменной массива динамически отображается в браузере, но другие операции не отображаются, пока не будет выполнена операция обновления вручную.
  • Наконец, кнопка «Обновить поля» фактически выполняет операцию обновления вручную.

Интересно, почему переменная в массиве изменяется динамически, но другим типам переменных требуется операция вручную, чтобы загрузить переменную с текущим значением переменных в службе.

HTML-код:

    <div ng-controller='Refresh as r1'>
  <h3>Variable Refreshing Test</h3> 
  <input type="text" ng-model='r1.texto' placeholder="Write a Text">
  <input type="text" ng-model='r1.addtext' placeholder="Write a text to concatenate">
  <button ng-click='r1.addText();'>Add Text</button>
  <button ng-click='r1.refreshText();'>Refresh Fields</button>
  <button ng-click='r1.addOne();'>Add One</button>
  <div>
    <b>Initial text is:</b> {{r1.texto}}
    <br>
    <b>Current text to add is:</b> {{r1.addtext}}
    <br>
    <b>Complete text is:</b> {{r1.totaltext}}
    <br>
    <b>Integer currently is:</b> {{r1.Integer}}
    <br>
    <b>String currently is:</b> {{r1.String}}
    <br>
    <b>Array currently is:</b> {{r1.Array}}
  </div>

Код JS:

(function() {
    'use strict';
    angular.module('RefreshText', [])
        .controller('Refresh', Refresh)
        .service('Service1', Service1);

    function Refresh($scope, Service1) {
        var refresh = this;
        window.MY_SCOPE = refresh;
        window.listScope = $scope;
        refresh.addText = function() {
            var temp = Service1.addText(refresh.texto, refresh.addtext);
        };
        refresh.refresh.Text = function() {
            refresh.totaltext = Service1.getText();
            refresh.Integer = Service1.getInteger();
            refresh.String = Service1.getString();
            refresh.Array = Service1.getArray();
        };
        refresh.Integer = Service1.getInteger();
        refresh.String = Service1.getString();
        refresh.Array = Service1.getArray();
        refresh.addOne = function() {
            Service1.sumaOne();
        };
    }

    function Service1() {
        var service = this;
        window.ServiceScope = service;
        var text3;
        var varInteger = 1;
        var varString = "a";
        var varArray = [];
        varArray[0] = 1;
        service.addText = function(text1, text2) {
            text3 = text1 + text2;
            return text3;
        };
        service.getText = function() {
            return text3;
        };
        service.getInteger = function() {
            return varInteger;
        };
        service.getString = function() {
            return varString;
        };
        service.getArray = function() {
            return varArray;
        };
        service.sumaOne = function() {
            varInteger++;
            varString = varString + "a";
            varArray[0]++;
        };
    }
})();

Код, который я использовал для тестов, находится здесь: https://github.com/harryangstrom/refreshTest.git.

Answer 1

Переменные, не являющиеся массивами, используют примитивные привязки, и AngularJS не обновляет их автоматически. Если вы поместите эти переменные за объектом и вместо этого будете связывать их через объект, любые изменения этих переменных должны видеть, что они автоматически обновляются в представлении.

Например, вы можете настроить свой JavaScript следующим образом:

function Refresh($scope, Service1) {
    this.vars = Service1.getVars();
    this.updateVars = Service1.updateVars;
    // ...
}

function Service1() {
    // Note primitives are inside an object
    var vars = { int: 0, str: 'a' };
    this.getVars = function () {
        return vars;
    };
    this.updateVars = function () {
        vars.int += 1;
        vars.str += 'a';
    };
    // ...
}

Тогда ваш HTML выглядит так:

<div ng-controller="Refresh as r1">
    <div>{{ r1.vars.int }} {{ r1.vars.str}}</div>
    <button ng-click="r1.updateVars()">Update</button>
</div>