将jQuery视图处理程序转换为Angular Controller

Question

尝试将大量jQuery和JS转换为Angular控制器，以便它以“NG”方式工作。我查看了文档，看起来我可以使用angular.element（document）.ready来初始化jQuery变量，在Angular中设置文档就绪函数。我感到困惑的是“这个”，它在角度世界中占有一席之地。任何人都知道从哪里开始？

这是我想要完成的笔： CodePen

我知道有ng-show / ng-hide和ngAria出现在1.3左右，但我只是想抓住将很多jQuery转换成角度的基础。

这是我目前的剧本：

$(document).ready(function() {
  var hs1 = new hideShow('open1', 'close1');
  var hs2 = new hideShow('open2', 'close2');
  var hs3 = new hideShow('open3', 'close3');
  var hs4 = new hideShow('open4', 'close4');
});


function hideShow(toggleID, closeID) {
  this.$toggle = $('#' + toggleID);
  this.$close = $('#' + closeID);
  this.$region = $('#' + this.$toggle.attr('aria-controls'));
  this.keys = {
    enter: 13,
    space: 32
  };

  this.toggleSpeed = 100;
  this.bindHandlers();
} 


hideShow.prototype.bindHandlers = function() {
  var thisObj = this;
  this.$toggle.click(function(e) {
    thisObj.toggleRegion();
    e.stopPropagation();
    return false;
  });
  this.$close.click(function(e) {
    thisObj.hideRegion();
    e.stopPropagation();
    return false;
  });
}


hideShow.prototype.hideRegion = function() {
  this.$region.hide().attr('aria-expanded', 'false');
  this.$toggle.find('span').html('Show');
  this.$toggle.focus();
}


hideShow.prototype.toggleRegion = function() {
  var thisObj = this;
  this.$region.slideToggle(this.toggleSpeed, function() {
    if ($(this).attr('aria-expanded') == 'false') { // region is collapsed
      $(this).attr('aria-expanded', 'true');
      $(this).focus();
      thisObj.$toggle.find('span').html('Hide');
    } else {
      $(this).attr('aria-expanded', 'false');
      thisObj.$toggle.find('span').html('Show');
    }
  });
}

感谢任何建议或示例。