Javascript 在AngularJS中添加变量

我正在尝试使用一个按钮将3个单独的变量添加到一起，但它似乎不起作用：

这是JS：

angular.module('basket', ['onsen'])
.controller('basketController', function() {
  this.topsQuantity = 1;
  this.bottomsQuantity = 2;
  this.underwearQuantity = 3;
  this.calculator = 0;

  this.pay = function pay() {
    window.alert("Thanks!");
  };

  this.total = function calculator(topsQuantity, bottomsQuantity, underwearQuantity) {
    return topsQuantity + bottomsQuantity + underwearQuantity;
  };

});

这是HTML：

<label ng-model="basket.total">Total: {{basket.total}}</label>
        <div  style="width: 100% !important; position: fixed; bottom: 10px;">
          <ons-button modifier="cta" onclick="basket.total">
          <!--<ons-button modifier="cta" onclick="myNavigator.pushPage('Laundries.html', { animation : 'slide' } )">-->
            Calculate Total <ons-icon icon="fa-angle-right"></ons-icon>
          </ons-button>
        </div>

---

任何帮助都将不胜感激

您的代码中有各种各样的错误：

您可以更好地理解AngularJS上下文中此范围和$scope之间的区别。 javascript中的[propertyName]是对象内部名为[propertName]的属性的声明

在AngularJS中，$scope是一个成员，在它里面，您应该声明在html模板中使用的所有变量

如果声明控制器，则无法在代码中看到， 期待某处：

ng controller='basketController'

您将模块命名为“basket”，并在HTML中使用变量“basket”，尽管它没有在控制器中声明-您应该在$scope上标记它

因此，在您的情况下，应该是：

angular.module('basket', ['onsen'])
   .controller('basketController', function() {
       this.topsQuantity = 1;
       this.bottomsQuantity = 2;
       this.underwearQuantity = 3;
       this.calculator = 0;

       this.pay = function pay() {
           window.alert("Thanks!");
       };

       $scope.total = function calculator(topsQuantity, bottomsQuantity, underwearQuantity) {
           return topsQuantity + bottomsQuantity + underwearQuantity;
       };

   });

注意$scope.total

您的HTML应该是这样的：

<label>Total: {{total()}}</label>

---

是否要在方法内部使用this.topQuantity等并跳过参数？我不知道剩下的代码我该怎么做。我看不出控制器和视图之间有任何关系。请提供可运行的代码段并删除所有不可运行的代码。