我的aplication调整大小不是有效的angularjs

Question

我正在尝试按照我的光标做一行，当发生这种情况时，它必须向右或向左调整大小，如果你看到下面的代码，你会看到该行但是当我想要向右或向左移动时没有任何反应。

任何帮助都会有所帮助，我是新手，谢谢！

如果你看到下面的代码，你会知道我想做什么，你会看到垂直线是如何工作的。

这是我的代码：https://jsfiddle.net/yjvj9hfc/1/

angular.module('mc.resizer', []).directive('resizer', function($document) {

  return function($scope, $element, $attrs) {

    $element.on('mousedown', function(event) {
      event.preventDefault();

      $document.on('mousemove', mousemove);
      $document.on('mouseup', mouseup);
    });

    function mousemove(event) {

      if ($attrs.resizer == 'vertical') {
        // Handle vertical resizer
        var x = event.pageX;

        if ($attrs.resizerMax && x > $attrs.resizerMax) {
          x = parseInt($attrs.resizerMax);
        }

        $element.css({
          left: x + 'px'
        });

        $($attrs.resizerLeft).css({
          width: x + 'px'
        });
        $($attrs.resizerRight).css({
          left: (x + parseInt($attrs.resizerWidth)) + 'px'
        });

      } else {
        // Handle horizontal resizer
        var y = window.innerHeight - event.pageY;

        $element.css({
          bottom: y + 'px'
        });

        $($attrs.resizerTop).css({
          bottom: (y + parseInt($attrs.resizerHeight)) + 'px'
        });
        $($attrs.resizerBottom).css({
          height: y + 'px'
        });
      }
    }

    function mouseup() {
      $document.unbind('mousemove', mousemove);
      $document.unbind('mouseup', mouseup);
    }
  };
});

#topnav {
  background-color: #333333;
  display: block;
  height: 35px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #DDD;
}
#sidebar {
  background-color: #EEE;
  position: absolute;
  top: 35px;
  bottom: 0;
  left: 0;
  width: 200px;
  overflow: auto;
}
#content {
  position: absolute;
  top: 35px;
  bottom: 0;
  left: 206px
  /* 200 + 6*/
  ;
  right: 0;
  overflow: hidden;
  color: #FFF;
}
#top-content {
  position: absolute;
  top: 0;
  bottom: 200px;
  /* 130 + 6 */
  left: 0;
  right: 0;
  background-color: #EEE;
  overflow: auto;
}
#sidebar-resizer {
  background-color: #666;
  position: absolute;
  top: 35px;
  bottom: 0;
  left: 200px;
  width: 6px;
  cursor: e-resize;
}
#content-resizer {
  position: absolute;
  height: 6px;
  bottom: 130px;
  left: 0;
  right: 0;
  background-color: #666;
  cursor: n-resize;
}
#sidebar-resizer:hover,
#preview-resizer:hover {
  background-color: #AAA;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="sidebar">
  <div class="collapse in" ng-controller="reworkdetailsController" ng-hide="isHidden">
    <form novalidate class="simple-form">
      <fieldset>
        <legend class="translatable" data-i18n="rework">rework</legend>


        <div class="container col-md-12" ng-show="$ctrl.param.Code.visible">
          <div class="container col-md-6 translatable" data-i18n="Code">Code</div>
          <div class="container col-md-6">
            <input type="text" class="col-md-12" ng-readonly="$ctrl.param.Code.readonly" ng-model="$ctrl.reworkdetails.Code" ng-model-options="{ getterSetter: true }">
          </div>
        </div>

        <div class="container col-md-12" ng-show="$ctrl.param.Name.visible">
          <div class="container col-md-6 translatable" data-i18n="Name">Name</div>
          <div class="container col-md-6">
            <select name="NameSelect" id="NameSelect" class="col-md-12" ng-model="$ctrl.reworkdetails.Name" ng-model-options="{ getterSetter: true }">
              <option ng-repeat="option in $ctrl.reworkdetails.Products" value="{{option.value}}">{{option.label}}
                <option>
            </select>
          </div>
        </div>


        <div class="container col-md-6" ng-show="$ctrl.param.Quantity.visible">
          <div class="container col-md-6 translatable" data-i18n="Quantity">Quantity</div>
          <div class="container col-md-6">
            <input type="text" class="col-md-12" ng-readonly="$ctrl.param.Quantity.readonly" ng-model="$ctrl.reworkdetails.Quantity" ng-model-options="{ getterSetter: true }">
          </div>
        </div>


        <div class="container col-md-6" ng-show="$ctrl.param.UnitsQ.visible">
          <div class="container col-md-6 translatable" data-i18n="Units">Units</div>
          <div class="container col-md-6">
            <input type="text" class="col-md-12" ng-readonly="$ctrl.param.UnitsQ.readonly" ng-model="$ctrl.reworkdetails.UnitsQ" ng-model-options="{ getterSetter: true }">
          </div>
        </div>


      </fieldset>
    </form>
  </div>
  <div>
    <div class="row">
      <span class="glyphicon col-md-offset-6" style="padding-top: 5%" ng-class="isHidden ? 'glyphicon-chevron-down ' : 'glyphicon-chevron-up'" ng-click="isHidden = !isHidden;">
        </span>
    </div>
  </div>

</div>

<div id="content">

  <!--<div id="top-content">Top content <p>{{content}}</p></div>-->
  <div class="collapse in" ng-controller="reworkdetailsController" ng-hide="isHidden">
    <form novalidate class="simple-form">
      <fieldset>
        <legend class="translatable" data-i18n="rework">rework</legend>


        <div class="container col-md-12" ng-show="$ctrl.param.Code.visible">
          <div class="container col-md-6 translatable" data-i18n="Code">Code</div>
          <div class="container col-md-6">
            <input type="text" class="col-md-12" ng-readonly="$ctrl.param.Code.readonly" ng-model="$ctrl.reworkdetails.Code" ng-model-options="{ getterSetter: true }">
          </div>
        </div>

        <div class="container col-md-12" ng-show="$ctrl.param.Name.visible">
          <div class="container col-md-6 translatable" data-i18n="Name">Name</div>
          <div class="container col-md-6">
            <select name="NameSelect" id="NameSelect" class="col-md-12" ng-model="$ctrl.reworkdetails.Name" ng-model-options="{ getterSetter: true }">
              <option ng-repeat="option in $ctrl.reworkdetails.Products" value="{{option.value}}">{{option.label}}
                <option>
            </select>
          </div>
        </div>


        <div class="container col-md-6" ng-show="$ctrl.param.Quantity.visible">
          <div class="container col-md-6 translatable" data-i18n="Quantity">Quantity</div>
          <div class="container col-md-6">
            <input type="text" class="col-md-12" ng-readonly="$ctrl.param.Quantity.readonly" ng-model="$ctrl.reworkdetails.Quantity" ng-model-options="{ getterSetter: true }">
          </div>
        </div>


        <div class="container col-md-6" ng-show="$ctrl.param.UnitsQ.visible">
          <div class="container col-md-6 translatable" data-i18n="Units">Units</div>
          <div class="container col-md-6">
            <input type="text" class="col-md-12" ng-readonly="$ctrl.param.UnitsQ.readonly" ng-model="$ctrl.reworkdetails.UnitsQ" ng-model-options="{ getterSetter: true }">
          </div>
        </div>


      </fieldset>
    </form>
  </div>
  <div>
    <div class="row">
      <span class="glyphicon col-md-offset-6" style="padding-top: 5%" ng-class="isHidden ? 'glyphicon-chevron-down ' : 'glyphicon-chevron-up'" ng-click="isHidden = !isHidden;">
        </span>
    </div>
  </div>





</div>

<div id="sidebar-resizer" resizer="vertical" resizer-width="6" resizer-left="#sidebar" resizer-right="#content" resizer-max="600">
</div>