Question

我目前正在尝试理解我找到的一段代码，并且有一部分让我很难

我的指令是这样声明的：

@Component({
  (...)
})
export class SomeComponent {
  constructor(private service:SomeService) {
    this.service.getPhaseVotes('someissue')
      .subscribe(data => this.phase_votes = data,
               err => console.log(err),
               () => this.getStatus(issue));
  }
}

控制器：

(function () {    
  angular
    .module('meanApp')
    .directive('navigation', navigation);

  function navigation () {
    console.log("enters directive");
    return {
      restrict: 'EA',
      templateUrl: '/common/directives/navigation/navigation.template.html',
      controller: 'navigationCtrl as navvm'
    };
  }
})();

观点：

(function () {
  angular
    .module('meanApp')
    .controller('navigationCtrl', navigationCtrl);

  navigationCtrl.$inject = ['$location','authentication'];
  function navigationCtrl($location, authentication) {
    console.log("enters navigation controller")
    var vm = this;

    vm.isLoggedIn = authentication.isLoggedIn();

    vm.currentUser = authentication.currentUser();
  }
})();

我不明白的是以下内容：为什么我们使用'nvvm'变量，而我们在控制器中使用的控制器实例名为'vm'。在视图中，我会选择仅使用<div class="navbar navbar-default"> <div class="container"> <div id="navbar-main"> <ul class="nav navbar-nav"> <li><a href="/">Home</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li ng-hide="navvm.isLoggedIn"><a href="login">Sign in</a></li> <li ng-show="navvm.isLoggedIn"><a href="profile">{{ navvm.currentUser.name }}</a></li> </ul> </div> </div> </div>

而不是navvm.currentUser.name

感谢您帮助我了解这个细节

Answer 1

如指令中所述：

controller: 'navigationCtrl as navvm'

可以使用视图中的navigationCtrl别名引用navm，解释navvm.currentUser.name。

如果它困扰你那么多，只需将控制器alias替换为：

controller: 'navigationCtrl as vm'

并按照您的意愿使用它：vm.currentUser.name。

请注意，此alias允许您使用controller将数据绑定到this，从而摆脱$scope关键字。

Answer 2

nvvm是控制器名称的别名，因此您可以使用nvvm代替navigationCtrl。

vm是控制器内部的变量，因此无法从页面访问。

控制器的指令和实例

2 个答案: