AngularJS после переназначения полученного параметра директивы локальной переменной, затем представление не обновляется

Question

HTML

<div ng-app="myApp" ng-controller="Controller">
    <test text="vartext"></test>
</div>

Javascript

myApp.controller('Controller', ['$scope', '$timeout', function($scope, $timeout) {
    $scope.vartext = ["foo"];
    $timeout(() => $scope.vartext = ["bar"], 3000);
}]);

myApp.directive("test", function() {
   return {
       template: '<div>{{inside[0]}}</div>',
       replace: true,
       scope: {
           text: "="
       },
       controller: ['$scope', '$timeout', function($scope, $timeout) {
            $scope.inside = $scope.text;
       }]
   }
});

Поведение таково, что директива сначала отображает "foo". Но через 3 секунды он не меняется на «bar».

В этом примере есть два особых случая:

1. Через три секунды я изменил vartext на новый объект. Если я использую оригинальный объект, «бар» будет отображаться.
2. В контроллере директивы я переназначил «текст» на внутреннюю переменную. Если я не переназначу его, даже перед новым объектом будет отображаться «bar».

Мой вопрос:

Почему после того, как я переназначил полученный параметр директивы на локальную переменную, а затемЯ передаю новый объект, привязка к просмотру будет потеряна? Разве локальная переменная с именем inside не должна ссылаться на новый объект?

Спасибо!

Answer 1

Оператор присваивания выполняет присваивание только один раз, когда служба $ compile создает контроллер. Операция присваивания должна выполняться каждый раз, когда изменяется эталонное значение.

---

Чтобы избежать необходимости выполнять новое присвоение, используйте angular.copy, чтобы обновить содержимое существующей ссылки:

myApp.controller('Controller', ['$scope', '$timeout', function($scope, $timeout) {
    $scope.vartext = ["foo"];
    ̶$̶t̶i̶m̶e̶o̶u̶t̶(̶(̶)̶ ̶=̶>̶ ̶$̶s̶c̶o̶p̶e̶.̶v̶a̶r̶t̶e̶x̶t̶ ̶=̶ ̶[̶"̶b̶a̶r̶"̶]̶,̶ ̶3̶0̶0̶0̶)̶;̶
    $timeout(() => angular.copy(["bar"], $scope.vartext), 3000);
}]);

Таким образом содержимое нового объекта копируется в существующую ссылку.

Для получения дополнительной информации см.

• AngularJS angular.copy Справочник по API функций

---

Другой подход заключается в использовании односторонней привязки и ловушки жизненного цикла $onChanges для выполнения нового назначения каждый разссылка меняется:

myApp.directive("test", function() {
   return {
       template: '<div>{{inside[0]}}</div>',
       replace: true,
       scope: {
           ̶t̶e̶x̶t̶:̶ ̶"̶=̶"̶
           text: "<"
       },
       controller: ['$scope', '$timeout', function($scope, $timeout) {
            this.$onChanges = function(changes) {
                if (changes.text) {
                    $scope.inside = $scope.text;
                };
            };
       }]
   }
});

При изменении ссылки, назначенной на text, код назначает новую ссылку для свойства inside $scope.

Для получения дополнительной информации,см.

• Справочник по API AngularJS - Справочник по API - крючки жизненного цикла