当我删除jQuery时，为什么我的指令控制器会崩溃

Question

我有jQuery作为依赖，但没有使用它。删除后，我的指令控制器中的一个方法停止工作。

我有以下bower.json

bower.json文件：

{
  "name": "Mendelhealth",
  "version": "0.1.0",
  "description": "Front end application code.",
  "authors": [
    "Aaron Balthaser"
  ],
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components"
  ],
  "devDependencies": {
    "susy": "^2.2.12"
  },
  "dependencies": {
    "angular": "^1.5.3",
    "angular-ui-router": "^0.2.18",
    "angular-animate": "^1.5.3",
    "angular-material": "master",
    "angular-material-icons": "^0.7.0",
    "jquery": "^3.0.0",
    "angular-sanitize": "^1.5.7"
  },
  "overrides": {}
}

当我删除jQuery引用时，在我的指令控制器中发现的this.filter正在破坏。这对我来说真是莫名其妙。任何帮助，将不胜感激。感谢。

指令：

(function () {
  'use strict';

  angular.module('timeline')
    .directive('timeline', function() {

      function link() {

      }

      return {
        link: link,
        controller: 'TimelineCtrl',
        controllerAs: 'timeline',
        templateUrl: 'app/modules/timeline/timeline.html'
      };
    });
}());

指令控制人：

(function () {
  'use strict';

  angular.module('timeline')
    .controller('TimelineCtrl',
        ['$rootScope', '$http', 'API_URL', 'timelineData',
            function($rootScope, $http, API_URL, timelineData) {

      var that = this;
      this.datum = [];

      timelineData.async().then(function(data) {
        that.datum = data;
        that.datum.sort(function(dateA, dateB) {
          return new Date(dateB.date) - new Date(dateA.date);
        });
      });

      this.filter = function(category) {
        $rootScope.$broadcast('filter', category);
      };

      this.removeFilter = function() {
        $rootScope.$broadcast('removefilter', '');
      };
    }]);
}());

指令模板：

<div class="vertical-padding">
  <div class="wrapper">
    <nav id="timeline-navigtaion">
      <ul>
        <li
            class="timeline-navigtaion-item"
            ng-click="removeFilter()">All
        </li>
        <li
            class="timeline-navigtaion-item"
            ng-click="timeline.filter('imaging')">Imaging
        </li>
        <li
            class="timeline-navigtaion-item"
            ng-click="timeline.filter('medications')">Medications
        </li>
        <li
            class="timeline-navigtaion-item"
            ng-click="timeline.filter('problems')">Problems
        </li>
        <li
            class="timeline-navigtaion-item"
            ng-click="timeline.filter('procedures')">Procedures
        </li>
        <li
            class="timeline-navigtaion-item"
            ng-click="timeline.filter('genetics')">Genetics
        </li>
        <li
            class="timeline-navigtaion-item"
            ng-click="timeline.filter('pathology')">Pathology
        </li>
        <li
            class="timeline-navigtaion-item"
            ng-click="timeline.filter('notes')">Notes
        </li>
        <li
            class="timeline-navigtaion-item"
            ng-click="timeline.filter('labs')">Labs
        </li>
      </ul>
    </nav>
    <section id="timeline" class="timeline-container">
      <div timeline-item class="timeline-block"
          datum="timeline.datum[$index]"
          ng-repeat="item in timeline.datum">
      </div>
    </section>
  </div>
</div>