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: '='
    }
  };
}

带角度材料和控制器的客户指令

1 个答案: