制作我的第一个角度指令。 'vm' 未定义答案

【问题标题】：Making my first angular directive. 'vm' is undefined制作我的第一个角度指令。 'vm' 未定义
【发布时间】：2017-06-06 20:05:27
【问题描述】：

(function () {
  'use strict';

  angular
    .module('contacts.directives')
    .directive('hotkeys', HotkeysDirective);

  HotkeysDirective.$inject = ['$resource', '$document'];

  function HotkeysDirective($resource, $document) {
    var directive = {
      templateUrl: '/my-app/contacts/client/views/ui/hotkeys.ui.html',
      link: link,
      controller: 'AddManagerController',
      controllerAs: 'vm',
      scope: {},
      bindToController: {
        },
    };

    return directive;

    function link(scope, element, attrs, modelCtrl) {

      $document.bind('keypress', function (e) {
        var key = String.fromCharCode(e.which);
        if (key == 1 || key == 2 || key == 3 || key == 4 || key == 5 || key == 6) {
          scope.$broadcast('keypress', e, e.which);
        }
      });

      scope.$on('keypress', function (event, key) {
        // do stuff
        scope.$apply();
      });
    }
  }
}());

这是我认为不起作用的代码...

HotkeysDirective.$inject = ['$resource', '$document'];

function HotkeysDirective($resource, $document) {
  var directive = {
    templateUrl: '/request-off-work/contacts/client/views/ui/hotkeys.ui.html',
    link: link,
    controller: 'AddManagerController',
    controllerAs: 'vm',
    scope: {},
    bindToController: {
      },
  };

  return directive;

  function link(scope, element, attrs, modelCtrl) {

当我使用controllerAs：'vm'时，它说vm未定义，在AddManagerController中，它说'var vm = this;'。也不知道为什么 scope: {} 需要在那里，我最终会弄清楚 bindToController ......我想我需要将 vm.credentials.groups 绑定到它。

更新：这是控制器

function AddManagerController($scope, $document, $rootScope, $state, $window, Authentication, ContactsService, Notification) {
  var vm = this;
  vm.authentication = Authentication;
  vm.credentials = {};
  vm.showGroups = [null, false, false, false, false, false, false];

【问题讨论】：

标签： angularjs angular-directive

【解决方案1】：

您不需要使用范围，因为您已经绑定到控制器实例 this。

【讨论】：

谢谢！仍然说 vm 未定义.. 编辑：这是否意味着我在函数链接（范围，...）中不需要范围？
不，我的意思是指令定义，你能告诉我你的html代码吗？
热键>
当我看到html代码时，vm.showGroups没有控制器，去这个解决方案bindToController: true
我现在看到了你的更新，只需从你的指令声明中删除控制器、控制器As、范围、bindToController，它们似乎没有用！

【解决方案2】：

您定义了一个controller 和一个controllerAs 等于vm。然后你想定义一个bindToController = true 这意味着指令绑定将与控制器相关联。

所以如果在你的控制器内部你这样做：

this.myVar = 'test';

然后在你的指令模板中你可以简单地做：

<div>{{vm.myVar}}</div>

【讨论】：

谢谢！！！我将进行一些编辑，看看这个答案是否能解决它。
{{vm.showGroups}} 有效...如果我将 vm.credentials.groups 更改为 this.credentials.groups 它说无法读取 null 的“凭据”
但是您是在指令的控制器中输入内容吗？还是链接功能？你有没有在控制器的开头有一行像var vm=this;
你的意思是在你的链接函数里面吗？
不，我的朋友，在链接中您应该使用对控制器的引用，在您的链接函数中调用：modelCtrl。所以你应该这样做：console.log(modelCtrl.myVar); 它应该可以工作

【解决方案3】：

我将指令链接函数中的 vm.credentials.groups 更改为 scope.vm.credentials.groups，现在它可以工作了。希望这个答案对某人有所帮助。

【讨论】：