为什么下面的$scope在此函数中变为空白

Why does the following $scope becomes blank inside this function?

本文关键字：函数 空白 scope 为什么      更新时间：2023-09-26

为什么panodataName在$scope.addPanodata函数内变空？

HTML:

<input type="text" class="form-control" ng-model="panodataName" style="width:auto;padding:0;">
<a class="btn btn-primary" href="javascript:;" ng-click="addPanodata(pano.objectId)">Add</a>

JS:

angular.module('yoApp')
  .controller('addPanoCtrl', function($q, $scope, $rootScope, $routeParams, serviceUpload) {
    $scope.panodataName = ''
    $scope.addPanodata = function(panoId) {
      var Panodata = AV.Object.extend('PanoramaData'),
      panodata = new Panodata(),
      panoJSON = _.where($scope.building.pano, {'objectId': panoId})
      $scope.pano = panoJSON[0]
      console.log($scope.panodataName)
      console.log($scope.panodataName)
      panodata.save(json, {
      success: function(object) {
      },
      error: function(object, error) {
      }
      })
    }

我觉得这很奇怪，因为如果我这样做：

｛｛panodataName｝｝

panodataName正确显示input的值。

编辑：

也许是因为它在ng-repeat里面？

<div class="col-md-6" ng-repeat="panodata in pano.panoData">

你说你在ng-repeat中得到了这个逻辑。我怀疑这是你的问题。

angular对ng-repeat的每个"分配"所做的是创建一个新的scope。因此，ng-model="panodataName"将一个名为panodataName的属性绑定到循环特定迭代的本地作用域，而不是全局控制器作用域。

此外，如果在ng repeat中添加{{panodataName}}，那么这将起作用并打印输入文本，因为它绑定到ng repeat的子作用域。

我相信您想要的是绑定到ng-repeat的父作用域。这是您实际定义panodataName属性的地方，也是您尝试记录的内容。

要做到这一点，你也需要改变你的ng模型：

ng-model="$parent.panodataName"

$parent是指向ng-repeats父作用域的特定循环分配作用域的全局变量。

希望这是有道理的，我添加了一个小提琴演示。

注意：这个实现有一个缺点，因为现在每个输入都绑定到同一个变量，如果您更新一个，ng中的所有其他输入都将更新。

https://jsfiddle.net/j4txmzhe/

编辑：添加校样，

这表示ng-repeat创建新的作用域指令，用于创建作用域

此外，更多的谷歌搜索会提出这个SO答案，其中的评论描述了为什么避开$parent是个好主意。

相关文章：