时间戳

首页 > 解决方案 > 将指令接收到的参数重新分配给局部变量后的AngularJS然后查看不更新

javascript - 将指令接收到的参数重新分配给局部变量后的AngularJS然后查看不更新

问题描述

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引用新对象吗？

谢谢！

标签： javascriptangularjs

解决方案

赋值运算符仅在 $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);
}]);

这样，新对象的内容就会被复制到现有的引用中。

有关详细信息，请参阅

另一种方法是使用单向绑定和$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。

有关详细信息，请参阅

推荐阅读