ControllerAs with vm.语法:如何

ControllerAs with vm. syntax: how to?

本文关键字：如何 语法 vm with ControllerAs      更新时间：2023-09-26

我已经在几个地方读到，包括一些SO问题，ControllerAs语法正在成为推荐的模式，因为在其他方面，它类似于Angular 2中的工作方式。

因此，我想深入研究一下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 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()"

否则angular将无法识别这些函数。

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

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

工作活塞:http://plnkr.co/edit/R7oTvcUxjCqi8YXoLOoh?p=preview

相关文章：