javascript - Controller 的指令和实例

Question

我目前正在尝试理解我发现的一段代码，其中有一部分让我很难

I 指令是这样声明的:

(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'
    };
  }
})();

Controller :

(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();
  }
})();

View :

<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>

我不明白的是:为什么我们使用“nvvm”变量，而我们在 Controller 中使用的 Controller 实例名为“vm”。在 View 中，我会选择简单地使用 vm.currentUser.name

，而不是 navvm.currentUser.name

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

Answer 1

正如指令中所述:

controller: 'navigationCtrl as navvm'

可以在 View 中使用 navm 别名引用 navigationCtrl，解释 navvm.currentUser.name。

如果它让您很烦恼，只需将 Controller 别名替换为:

controller: 'navigationCtrl as vm'

并根据需要使用它:vm.currentUser.name。

请注意，此别名允许您使用this将数据绑定(bind)到您的 Controller ，从而摆脱$scope 关键字。