Javascript AngularJS中指令与控制器的交互

我想创建一个显示为可折叠框的组件。 展开时，应显示转置的内容；折叠时，它只应显示其标签

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

});

这种“几乎”的方法似乎有效：

唯一不起作用的似乎是在链接期间从绑定的事件处理程序访问控制器的作用域

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

这是在每次使用指令时创建控制器实例的正确（通常）方法吗

如何从处理程序访问切换函数

---

您需要将控制器放入指令的

controller

属性中，而不是在指令模板上使用

ng controller

：

返回{
限制：'E'，
是的，
要求：“^ngModel”，
范围：{
ngModel:“=”
},
模板：“标题：{{ngModel.Title}}
测试”，
控制器：“CollapseController”，
链接：函数（$scope，element，attr）{
元素绑定（'单击'，函数（）{
警报（'Clicked！'）；
$scope.toggle（）；
});
}
};

---

实际上，

CollapseController

的作用域将是指令作用域的子作用域，这就是为什么

toggle（）

没有显示在那里的原因。

这正是我最想要的——尽管可见性没有更新，所以我可能缺少一些监视/绑定。在阅读了文档和一些教程之后，我的印象是controller属性用于为所有实例共享一个控制器（用于实例之间的通信）。我必须使用$scope.$apply（）更新.toggle（）中的值。

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

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