javascript - 为什么此函数中以下 $scope 变为空白？

Question

为什么 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 displays the value of input correctly.

EDIT:

Maybe it's because it's inside an ng-repeat?

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

Answer 1

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

对于 ng-repeat 的每次“迭代”，Angular 都会创建一个新的范围。因此，您的 ng-model="panodataName" 将名为 panodataName 的属性绑定(bind)到循环特定迭代的本地范围，而不是全局 Controller 范围。

此外，如果您在 ng-repeat 内添加 {{panodataName}} ，那么它将起作用并打印输入文本，因为它绑定(bind)到 ng-repeat 的子范围。

我相信你想要的是绑定(bind)到ng-repeat的父范围。这是您实际定义 panodataName 属性以及您尝试记录的内容的位置。

为此，您还需要更改您的 ng-model:

ng-model="$parent.panodataName"

$parent 是特定循环迭代范围的全局变量，指向 ng-repeats 父范围。

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

注意:此实现有一个缺点，因为如果您更新一个输入，则每个输入现在都绑定(bind)到同一变量，ng-repeat 中的所有其他输入都会更新。

https://jsfiddle.net/j4txmzhe/

<小时/>

编辑:添加证据，

这表明 ng-repeat 创建了新范围 directives-that-create-scopes

Google 搜索还可以找到 this所以回答评论描述了为什么远离 $parent 是个好主意。