使用 Angular Material 和 controllerAs 的客户指令

Question

我正在测试 Angular Material，我正在尝试使用自定义指令，但它似乎不想遵守我对 vm = this 的绑定。这是我正在尝试的示例。

HTML

<md-button ng-click="vm.test()">vm.Test</md-button>

JavaScript

(function() {
  'use strict';

  angular
    .module('sidenav.directive', ['ngMaterial'])
    .directive('sidenav', sidenav);

  function sidenav() {
    return {
      templateUrl: 'app/components/sidenav/sidenav.directive.html',
      restrict: 'EA',
      controller: SidenavController,
      controllerAs: 'vm',
      bindToController: true
    };
  }

  SidenavController.$inject = ['album', '$scope', 'authenticated', '$location', '$mdSidenav'];
  function SidenavController(albumFactory, $scope, authenticated, $location, $mdSidenav) {
    var vm = this;
    vm.test = function () {
      console.log('vm fired');
    };
  }
})();

不会触发点击事件。但是，如果我将控制器中的 vm 替换为 $scope 并仅使用 ng-click="test()"，则按钮会起作用。任何有关如何解决此问题的帮助将不胜感激。

Answer 1

需要向指令添加范围，已更新：

function sidenav() {
  return {
    templateUrl: 'app/components/sidenav/sidenav.directive.html',
    restrict: 'EA',
    controller: SidenavController,
    controllerAs: 'vm',
    bindToController: true,
    scope: {
      vm: '='
    }
  };
}

使用 Angular Material 和 controllerAs 的客户指令

Customer Directive with Angular Material and controllerAs

javascript

angularjs

angular-material