Question

我正在尝试将我的控制器'$ scope syntax'转换为'controller as'语法，由于某种原因，我的函数停止了触发，无法弄清楚最新情况。

clearCheck（）是一个例子，但我的所有功能都没有工作。

 <div ng-controller="tipController as vm">
  <div class="row checkTotalDisplay selected">
    <div class="col totalDisplayTitle">Check Total</div>
    <div class="col col-50 totalDisplayAmt">${{vm.checkTotal}} <i class="ion-close-circled" ng-click="vm.clearCheck()"></i></div>
    </div>
  </div>
 </div>

.controller('tipController', ["$scope", function ($scope) {
  var vm = this;
  var DEFAULT_CHECK_TOTAL = '0.00'; // display correctly shows 0.00

  $scope.vm = {
    checkTotal: DEFAULT_CHECK_TOTAL
  };

   function clearCheck() {
     vm.clearCheck = clearCheck; // doesn't fire
     console.log(vm.checkTotal); // doesn't fire
     vm.checkTotal = '4'; // doesn't fire
   };
}]);

$ scope语法有效：

.controller('tipController', function($scope) {

  $scope.checkTotal = '0.00';

  $scope.clearCheck = function () {
     $scope.checkTotal = '4'; // correctly changes display to '4'
  };
});

Answer 1

在这种情况下，您可能会误解vm。实际上，除了将$scope替换为$scope之外，您将使用vm在原始控制器中执行相同的操作。

.controller('tipController', function() {
  var vm = this;
  vm.checkTotal = '0.00';

  vm.clearCheck = function () {
     vm.checkTotal = '4'; // correctly changes display to '4'
  };
});

Answer 2

在您的控制器中，您声明

$scope.vm = {
    checkTotal: DEFAULT_CHECK_TOTAL
};

然后你做tipController as vm

当您绑定{{vm.checkTotal}}时，vm不是$ scope.vm，而是$ scope。对于您所写的内容，您将使用{{vm.vm.checkTotal}}（$ scope.vm.checkTotal）。

编辑：Makoto的答案显示了如何实现您想要的行为。

'Controller as'语法功能未触发

2 个答案: