控制器的指令和实例

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

控制器：

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

观点：

<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' 变量，而我们在控制器中使用的控制器实例名为 'vm'。在视图中，而不是 navvm.currentUser.name，我会选择简单地使用 vm.currentUser.name

感谢您帮助我阐明这个细节

Answer 1

如指令中所述：

controller: 'navigationCtrl as navvm'

可以使用您认为的 navm 别名引用 navigationCtrl，解释 navvm.currentUser.name。

如果这让您很困扰，只需将控制器更换为 alias：

controller: 'navigationCtrl as vm'

随心所欲地使用它：vm.currentUser.name。

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

Answer 2

nvvm是控制器名称的别名，所以可以用nvvm代替navigationCtrl

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

控制器的指令和实例

Directive and instance of the controller

javascript

controller

directive

angularjs