我们一般用controllerAs多半是因为要用到我们的controller里面的数据,比如获取一个名叫cells.json,里面包含了所有手机的概况,我们需要获取这些数据以便ng-repeate它,一般我们可以在路由和指令里面使用。
先上模板页面cells.html

<ul>
    <li ng-repeat="cell in vm.cells">{{cell.name}},价格:{{cell.price}}</li>
</ul>

路由内容

'use strict';

angular
  .module('myApp', ['ngRoute', 'app.directive'])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/', {
        template: 'index'
      })
      .when('/cells', {
        template: '<cells-list></cells-list>',
        controller: ['Cells',
          function(Cells) {
            var vm = this
            vm.cells = Cells.query();
          }
        ],
        controllerAs: 'vm'
      })
  }])

指令内容

'use strict';

angular
  .module('app.directive', ['app.service'])
  .directive('cellsList', function() {
    return {
      templateUrl: 'view/cells.html',
      controller: ['Cells',
        function(Cells) {
          var vm = this
          vm.cells = Cells.query();
        }
      ],
      controllerAs: 'vm'
    }
  })

可以选择在路由里面用controller和controllerAs,或者在指令里面使用。

效果都是一样的
controller和controllerAs


发表评论