there is some error in angular directive Unknown provider

Question

I get a error when I use directive, Is it repeat in modules?
I want to use directive hacked-nav in many template,
and I will write hacked-nav in many modules,
this error is directive name repeat?

index.html:

<hacked-nav></hacked-nav>  //this is directive

app.js:

angular.module('monitor')
.controller('hackMonitorCtr',['$scope', function($scope){
  ┊'use strict';
}])
.directive('scatterChart', function () {
  return {
  ┊ restrict: 'E',
  ┊ scope: false,
  ┊ template:'<div style="width: 50%; height: 100%; float: left;"></div>',
  ┊ replace:true,
  ┊ link:function(scope,element,attrs){
  ┊ ┊ require([
  ┊ ┊ ┊ 'echarts',
  ┊ ┊ ┊ 'ChartFactory',
  ┊ ┊ ┊ 'echarts/chart/scatter',
  ┊ ┊ ┊ ],
  ┊ ┊ ┊ function(ec,ChartFactory){
  ┊ ┊ ┊ ┊ var scatterDom = ec.init(element[0]);
  ┊ ┊ ┊ ┊ ChartFactory.create('scatter', null, null, scatterDom);
  ┊ ┊ ┊ });
  ┊ }
  };
})
.directive('hackedNav', ['$scope', '$stateParams', function($scope, $stateParams) {
  return {
  ┊ restrict: 'E',
  ┊ replace: true,
  ┊ scope: true,
  ┊ templateUrl: 'client/app/modules/monitor/templates/hacked-nav.ng.html',
  ┊ controller: function ($scope, $stateParams) {
  ┊ ┊ $scope.eventId = $stateParams.eventId;
  ┊ }
  };
}]);

hacked-nav.ng.html

<ul>
  <li class="nav">
  ┊ <a href="/monitors/{{ eventId }}"><img src="pic/composite.png" /></a>
  ┊ <span>综合信息</span>
  </li>
  <li class="nav">
  ┊ <a href="/hackmonitor/{{ eventId }}"><img src="pic/hacked.png"></a>
  ┊ <span>被黑监控</span>
  </li>
  <li class="nav">
  ┊ <a href="/leakmonitor/{{ eventId }}"><img src="pic/leak.png"></a>
  ┊ <span>漏洞监控</span>
  </li>
  <li class="nav">
  ┊ <a href="/webperformance/{{ eventId }}"><img src="pic/monitor.png"></a>
  ┊ <span>性能监控</span>
  </li>
  <li class="nav">
  ┊ <a href="/webdisposition/{{ eventId }}"><img src="pic/disposition.png"></a>
  ┊ <span>处置情况</span>
  </li>
</ul>

the chrmoe throw error:

Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- hackedNavDirective
http://errors.angularjs.org/1.4.2/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope%20%3C-%20hackedNavDirective
    at REGEX_STRING_REGEXP (angular.js:68)
    at angular.js:4264
    at Object.getService [as get] (angular.js:4411)
    at angular.js:4269
    at getService (angular.js:4411)
    at Object.invoke (angular.js:4443)
    at angular.js:6943
    at forEach (angular.js:336)
    at Object.<anonymous> (angular.js:6941)
    at Object.invoke (angular.js:4452)(anonymous function) @ angular.js:12332$get @ angular.js:9111(anonymous function) @ angular.js:6962forEach @ angular.js:336(anonymous function) @ angular.js:6941invoke @ angular.js:4452enforcedReturnValue @ angular.js:4305invoke @ angular.js:4452(anonymous function) @ angular.js:4270getService @ angular.js:4411addDirective @ angular.js:8210collectDirectives @ angular.js:7591compileNodes @ angular.js:7457compileNodes @ angular.js:7473compileNodes @ angular.js:7473compile @ angular.js:7368compile @ angular-ui-router.js:4013invokeLinkFn @ angular.js:8652nodeLinkFn @ angular.js:8152compositeLinkFn @ angular.js:7543publicLinkFn @ angular.js:7418updateView @ angular-ui-router.js:3959(anonymous function) @ angular-ui-router.js:3921$get.Scope.$broadcast @ angular.js:16167$state.transitionTo.$state.transition.resolved.then.$state.transition @ angular-ui-router.js:3311processQueue @ angular.js:14569(anonymous function) @ angular.js:14585$get.Scope.$eval @ angular.js:15848$get.Scope.$digest @ angular.js:15659$get.Scope.$apply @ angular.js:15953bootstrapApply @ angular.js:1633invoke @ angular.js:4452doBootstrap @ angular.js:1631bootstrap @ angular.js:1651angularInit @ angular.js:1545(anonymous function) @ angular.js:28361jQuery.Callbacks.fire @ jquery.js:3143jQuery.Callbacks.self.fireWith @ jquery.js:3255jQuery.extend.ready @ jquery.js:3467completed @ jquery.js:3498
scatter.js:1 Uncaught SyntaxError: Unexpected token <

can tell me how can I fix it?

Answer 1

Remove $scope from here

.directive('hackedNav', ['$scope', '$stateParams', function($scope,$stateParams)

To

.directive('hackedNav', [function()

and

Remove

controller: function ($scope, $stateParams) {$scope.eventId = $stateParams.eventId;}

    To

controller:customController

your controller

.controller('customController',['$scope','$stateParams',function($scope,$stateParams){'use strict';}])