如何将文本框内容作为参数传入AngularJS函数而非使用$scope变量

这种实现方式完全可行，你只需要将ng-model绑定的变量直接作为参数传入调用的函数即可，不需要在函数内部再访问$scope取值。

具体修改方法 #

1. 调整按钮的data-ng-click属性，直接传入绑定的变量
   你原有textarea绑定的模型是editTools.productDescription，直接把这个变量写到函数参数位即可：

<button 
  id="description-submit-button"
  data-ng-click="mySpecialFunction(editTools.productDescription)"
  buttonType="${'primary'}"
  htmlButtonType="${'button'}"
>
  <text>"Submit"</text>
</button>

2. 调整控制器中对应函数的写法
   原来需要从$scope取值的逻辑可以直接替换成参数接收：

// 原写法（需要访问$scope）
$scope.mySpecialFunction = function() {
  const description = $scope.editTools.productDescription;
  // 业务逻辑
}

// 修改后写法（无需在函数内访问$scope）
$scope.mySpecialFunction = function(description) {
  // 直接使用传入的description参数，就是用户在文本框输入的实时内容
  // 业务逻辑
}

进阶：完全避免使用$scope #

如果你希望连控制器的$scope注入都去掉，可以使用AngularJS的controller as语法：

1. 模板中声明控制器时添加别名：

<div ng-controller="YourController as vm">
  <!-- 其他代码 -->
  <textarea
    required="true"
    spellcheck="on"
    data-ng-model="vm.productDescription"
    rows="4"
  ></textarea>
  <button 
    id="description-submit-button"
    data-ng-click="vm.mySpecialFunction(vm.productDescription)"
    buttonType="${'primary'}"
    htmlButtonType="${'button'}"
  >
    <text>"Submit"</text>
  </button>
</div>

2. 控制器代码完全不需要注入$scope：

angular.module('yourApp').controller('YourController', function() {
  const vm = this;
  vm.mySpecialFunction = function(description) {
    // 这里完全没有$scope的使用，逻辑正常运行
    console.log('输入的产品描述：', description);
  }
})

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