Angular JS技术问询：如何将无列表名JSON及this赋值给作用域变量

1. 如何将不含列表名的JSON字符串赋值给AngularJS中的作用域变量？ #

这个操作其实很直观，核心就是先把JSON字符串解析成JavaScript可识别的对象/数组，再绑定到$scope变量上，分两种常见场景来说：

场景一：处理本地现成的JSON字符串 #

如果你手里已经有了无列表名的JSON字符串（比如前端硬编码、从本地存储读取的），直接用JSON.parse()方法解析后赋值给$scope即可：

app.controller('MyController', function($scope) {
  // 不含列表名的JSON数组字符串
  const rawJsonStr = '[{"id":1, "name":"张三"},{"id":2, "name":"李四"}]';
  // 解析为JS数组后绑定到作用域
  $scope.userList = JSON.parse(rawJsonStr);
});

之后在视图里就能用ng-repeat="user in userList"直接遍历渲染啦。

场景二：从后端接口获取这类JSON #

如果是通过$http请求后端拿到的响应，AngularJS会自动帮你把JSON字符串解析成对象/数组，直接取响应数据赋值给$scope就行：

app.controller('MyController', function($scope, $http) {
  $http.get('/api/get-users') // 后端返回无列表名的JSON数组，比如[{"id":1,...},...]
    .then(function(response) {
      // 直接绑定响应数据到作用域变量
      $scope.userList = response.data;
    });
});

2. 如何在AngularJS中将this赋值给作用域变量？ #

在AngularJS里this的指向会随上下文变化，所以推荐两种稳定的绑定方式：

方法一：直接绑定到$scope变量 #

如果你习惯用$scope的写法，可以在控制器构造函数里把this赋值给$scope的一个属性，避免后续方法里this指向混乱：

app.controller('MyController', function($scope) {
  // 把当前控制器的this绑定到$scope.self
  $scope.self = this;
  // 给this添加属性
  this.nickname = "小橙子";
  
  // 在控制器方法里也能通过$scope.self访问到原this的属性
  $scope.showNickname = function() {
    console.log($scope.self.nickname);
  };
});

视图里可以这么用：

<div ng-controller="MyController">
  <p>{{self.nickname}}</p>
  <button ng-click="showNickname()">显示昵称</button>
</div>

方法二：使用ViewModel模式（更推荐） #

现在更流行的写法是用vm（ViewModel的缩写）来存储this，避免和$scope混淆，代码逻辑更清晰：

app.controller('MyController', function() {
  // 把this赋值给vm，后续所有属性、方法都挂载在vm上
  var vm = this;
  vm.nickname = "小柚子";
  
  vm.showNickname = function() {
    console.log(vm.nickname);
  };
});

视图里要配合controllerAs语法使用：

<div ng-controller="MyController as vm">
  <p>{{vm.nickname}}</p>
  <button ng-click="vm.showNickname()">显示昵称</button>
</div>

这种方式能减少$scope的滥用，还能彻底避免this指向混乱的问题，代码维护起来更轻松。

内容的提问来源于stack exchange，提问作者satya