AngularJS表中未识别$scope方法

$scope methods not recognized from table AngularJS

本文关键字：scope 方法 识别 AngularJS      更新时间：2023-09-26

我正在使用ng repeat通过窗体绑定数组。这是代码。

HTML:

<form>
   <table>
      <tr data-ng-repeat="x in names">
         <td><textarea placeholder="New Name" ng-model="x.name" name="" ></textarea></td>
         <td><button style="background:#f00;" ng-click="removeChoice(x)">-</button></td>
      </tr>
   </table>
</form>

Javascript：

.controller('TerrItemCtrl', function($scope){
$ionicModal.fromTemplateUrl('templates/addAddress.html', {
   scope: $scope,
   animation: 'animated bounceInDown',
   hideDelay: 920
}).then(function (modal) {
   $scope.names = [{ 'id': 'name1'}];
   $scope.modal = modal;
   $scope.modal.show();
});
$scope.removeChoice = function (x) {
    for (i = 0; i < $scope.names; i++) {
        if ($scope.names[i].id === x.id) {
            $scope.names.splice(i);
            break;
        }
    }
};
});

我在这个表单的控制器中有一个$scope.removeChoice函数，html找不到它。我相信这是因为我使用的数组，但这是我将(-(按钮放在输入标记右侧的唯一方法。有办法绕过这个吗？

var app = angular.module('myApp', []);
app.controller('TerrItemCtrl', function($scope) {
  $scope.names = ["a", "b", "c"];
  $scope.removeChoice = function(index) {
    $scope.names.splice(index, 1);
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="myApp" ng-controller="TerrItemCtrl">
  <table>
    <tr data-ng-repeat="x in names">
      <td>
        <textarea placeholder="New Name" ng-model="x" name=""></textarea>
      </td>
      <td>
        <button style="background:#f00;" ng-click="removeChoice($index)">-</button>
      </td>
    </tr>
  </table>
</form>

ng-repeat引入了一个新的作用域。因此，要访问父对象，必须使用$parent.someMethodInParentScope()

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.names = ["a", "b", "c"];
  $scope.removeChoice = function(x) {
    $scope.names.splice(x,1);
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <form>
    <table data-ng-repeat="x in names">
      <tr>
        <td>
          <textarea placeholder="New Name" ng-model="x" name=""></textarea>
        </td>
        <td>
          <button style="background:#f00;" ng-click="$parent.removeChoice($index)">-</button>
        </td>
      </tr>
    </table>
  </form>
</div>

这一点在ng repeat的文档中可能并不明显。您必须检查文档中的$rootScope：https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$parent

试试这个

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.names = ["a", "b", "c"];
  $scope.removeChoice = function(x) {
    $scope.names.splice(x, 1);
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <form>
    <table>
      <tr data-ng-repeat="x in names">
        <td>
          <textarea placeholder="New Name" ng-model="x" name=""></textarea>
        </td>
        <td>
          <button style="background:#f00;" ng-click="removeChoice($index)">-</button>
        </td>
      </tr>
    </table>
  </form>
</div>

尝试使用这个：

.controller('TerrItemCtrl',['$scope', function($scope){
$ionicModal.fromTemplateUrl('templates/addAddress.html', {
   scope: $scope,
   animation: 'animated bounceInDown',
   hideDelay: 920
}).then(function (modal) {
   $scope.names = [{ 'id': 'name1'}];
   $scope.modal = modal;
   $scope.modal.show();
});
$scope.removeChoice = function (x) {
    for (i = 0; i < $scope.names; i++) {
        if ($scope.names[i].id === x.id) {
            $scope.names.splice(i);
            break;
        }
    }
};
}]);

.controller('TerrItemCtrl', ['$scope', function($scope){
}]);

应该尝试此语法将作用域作为数组以及函数进行传递。问题可能是，当函数执行时，它没有在可执行上下文中传递范围变量。

相关文章：