Javascript AngularJS局部/全局范围变量的使用

下面是我的HTML代码和JS脚本。我需要在单击按钮后更改“标签”的值，但它不会更改，并且仅使用全局值

我的预览/Plnkr可以在这里看到

JS代码：

var app = angular.module('myApp', []);


app.controller('myCtrl', function($scope) {

    $scope.firstName = "John";

    $scope.lastName = "Doe";
    $scope.year1=1992;
    $scope.year2=1994;
    $scope.year3=1996;
    $scope.label=[$scope.year1,$scope.year2,$scope.year3];
  $scope.splitYears = function()
  {      

      $scope.year1=2202;
      $scope.year3=2004;
      $scope.year2=2001;     

      $scope.checking=[$scope.year1,$scope.year2,$scope.year3];      
  }
   $scope.checking1=[$scope.year1,$scope.year2,$scope.year3];  
});

---

您永远不会更新单击处理程序中的

$scope.label

属性

$scope.splitYears = {
    $scope.year1=2202;
    $scope.year3=2004;
    $scope.year2=2001;
    $scope.label=[$scope.year1,$scope.year2,$scope.year3];
    $scope.checking=[$scope.year1,$scope.year2,$scope.year3];    
}

您还可以将标签绑定到对象数组，而不是直接绑定到对象

因此，当您更新对象时，没有更新的引用值（因为它们被数组屏蔽），AngularJS也没有意识到它需要更新标签

如果您将

$scope.label

直接绑定到

$scope.year1

，则会在UI上看到标签正确更新

另一个选项是使用$watch/$watchCollection，如果您的年份发生变化，则在click处理程序之外自动更新您的标签

$scope.array = [$scope.year1,$scope.year2,$scope.year3]
$scope.label = $scope.array;

$scope.$watchCollection("year1", function (newValue, oldValue) {
    $scope.label = [$scope.year1, $scope.year2, $scope.year3];
});

$scope.splitYears = function() {      
    $scope.year1=2202;
    $scope.year3=2004;
    $scope.year2=2001;
    $scope.checking=[$scope.year1,$scope.year2,$scope.year3];
}

---

我正在单击事件中更新$scope.year1、$scope.year2、$scope.year3。。我希望我的输出为外部：[199219941996]内部：[220220012004][220220012004]所以我需要创建years对象并分配给label？您实际上想要完成什么？你上面的评论改变了我对你问题的理解。一旦检查了这个问题。。我需要将在按钮单击处理程序内更改的$scope.year1分配给一个新的$scope.variable（在单击处理程序外），并在UI上显示它。@offeron我添加了一个不会干扰单击逻辑的附加选项。