javascript - vm的ControllerAs。语法:如何？

我在几个地方都读过，包括一些SO问题，ControllerAs语法正在成为推荐的模式，因为除其他外，它类似于在Angular 2中将如何完成。

结果，我想更深入地了解机智wit vm.的工作方式。

无论您对这种方法有何看法，我都希望您能找到一些有关为什么这种方法行不通的建议，

//controllerAs with vm. syntax
var app = angular.module('myApp', []);

app.controller('MyCtrl', function () {

  var vm = this;
  vm.like = likeIt;
  vm.dislike = dislikeIt;
  vm.flag = flagIt;

    function likeIt() {
      alert('liked');
    },
    function dislikeIt() {
      alert('disliked');
    },
    function flagIt() {
     alert('flagged');
    }

});

Plunkr 1

而使用$scope的这种方法范围确实

var app = angular.module('myApp', []);

app.controller('MyCtrl', function ($scope) {

 $scope.like =  function () {
      alert('liked');
    };
  $scope.dislike =  function () {
      alert('disliked');
    };
  $scope.flag =  function () {
     alert('flagged');
    }

});

Plunkr 2

的HTML

<html ng-app="myApp">

      <head>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
        <script src="script.js"></script>
      </head>

      <body ng-controller="MyCtrl as vm">
        <button ng-click="vm.like()">Like</button>
        <button ng-click="vm.dislike()">Dislike</button>
        <button ng-click="vm.flag()">Flag</button>

      </body>

    </html>

最佳答案

我认为您必须这样做：

ng-controller="MyCtrl as action"

然后像这样使用它：

ng-click="action.like()"

否则角度将无法识别功能。

还发现了另一个问题，在前两个函数之后有两个,破坏了代码：

function likeIt() {
  alert('liked');
}, <-- Here
function dislikeIt() {
  alert('disliked');
}, <-- And here
function flagIt() {
 alert('flagged');
}

工作插件：http://plnkr.co/edit/R7oTvcUxjCqi8YXoLOoh?p=preview

plunkr

javascript - vm的ControllerAs。语法:如何？