AngularJS范围变量Unwatch

AngularJS Scope variable Unwatch

本文关键字:Unwatch 变量 范围 AngularJS      更新时间:2023-09-26

我想在程序中的某个点之后取消观察一个Angular范围变量。

以下是我要关注的内容。

$scope.oldVar = {data: "Something"}
$scope.blankArray = []
$scope.blankArray.push($scope.oldVar)

现在,无论我对$scope.oldVar做了什么更改,它都反映了我在屏幕上看到的对blankArray的更改。

有什么方法可以限制这种情况吗?

使用angular.copy

可以使用angular.copy创建数据的新副本。这将阻止数据被绑定到blankArray内。

因此,在应用程序中的某个时刻,要解除值的绑定,可以使用angular.copy

$scope.blankArray = angular.copy($scope.blankArray)

龙来了

解除值绑定的问题是,您将引入复杂性,因为您的控制器现在需要知道值何时绑定以及何时未绑定。这引入了一个需要管理的额外状态,您的所有逻辑现在都需要有这种意识。

演示

function ctrl($scope) {
    $scope.oldVar = {data: "Something"};
    $scope.blankArray = [];
    $scope.blankArray.push($scope.oldVar);
    $scope.withoutCopy = []
    $scope.withoutCopy.push($scope.oldVar);
    
    $scope.change = function() {
        $scope.oldVar.data = Math.random();
    };
  
    $scope.unbind = function() {
        $scope.blankArray = angular.copy($scope.blankArray);
    };
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="ctrl">
    <button ng-click="change()">Test</button>
    <button ng-click="unbind()">Unbind</button>
    <pre>{{ blankArray | json }}</pre>
    <pre>{{ oldVar | json }}</pre>
    <pre>{{ withoutCopy | json }}</pre>
</div>