javascript - AngularJS 中指令和 Controller 的交互

Question

我想创建一个将自身显示为可折叠框的组件。展开时应显示嵌入的内容；当它折叠时，它应该只显示它​​的标签。

myApp.directive('collapsingBox', function() {

  return {
    restrict: 'E',
    transclude: true,
    require: '^ngModel',
    scope: {
      ngModel: '='
    },
    template: '<div ng-controller="CollapseController" class="collapsingBox"><div class="label">Title: {{ ngModel.title }}</div><br/><div ng-transclude ng-show="expanded">Test</div></div>',
    link: function($scope, element, attr) {
      element.bind('click', function() {
        alert('Clicked!');
        $scope.toggle();
      });
    }
  };

});

这个组件应该是可重用和可嵌套的，所以我想管理 Controller 中的值(如“标题”和“扩展”)，该 Controller 在每次使用指令时都会实例化:

myApp.controller('CollapseController', ['$scope', function($scope) {
  $scope.expanded = true;

  $scope.toggle = function() {
    $scope.expanded = !$scope.expanded;
  };
}]);

这个“几乎”似乎有效: http://plnkr.co/edit/pyYV0MAikXThvMO8BF69

唯一不起作用的似乎是从链接期间绑定(bind)的事件处理程序访问 Controller 的范围。

link: function($scope, element, attr) {
  element.bind('click', function() {
    alert('Clicked!');
    $scope.toggle(); // this is an error -- toggle is not found in scope
  });
}

1. 这是每次使用该指令创建一个 Controller 实例的正确(通常？)方法吗？
2. 如何从处理程序访问切换功能？

Answer 1

您需要将 Controller 放入指令的 controller 属性中，而不是在指令的模板上使用 ng-controller:

return {
  restrict: 'E',
  transclude: true,
  require: '^ngModel',
  scope: {
    ngModel: '='
  },
  template: '<div class="collapsingBox"><div class="label">Title: {{ ngModel.title }}</div><br/><div ng-transclude ng-show="expanded">Test</div></div>',
  controller: 'CollapseController',
  link: function($scope, element, attr) {
    element.bind('click', function() {
      alert('Clicked!');
      $scope.toggle();
    });
  }
};

因为 CollapseController 的作用域将是指令作用域的子作用域，这就是 toggle() 没有显示在那里的原因。