AngularJS需要指令中的控制器

Question

I'm trying to create a directive that will be used in multiple places in the app and I want it to opt into a controller.

When using the controller method

return {
      ...
      controller: 'BlogDashCourseCtrl',
      ...
      }

it gets the controller fine. But when I require it

return {
      ...
      require: '^BlogDashCourseCtrl',
      ...
      link: function($scope, iElm, iAttrs) {
          $scope.title = iAttrs.title; // Do not share me with other directives
          if($scope.title === $scope.step) { // $scope.step comes from a shared scope
              ...
          }
      }
}

it can't find the controller.

I don't want the controller to be called multiple times. I just want the directives to share a scope, have a private scope, too (so $scope in the directive doesn't bubble up) and do some stuff with a service.

Answer 1

A directive is attached to a DOM node. A DOM node can't have two scopes. Either you share the parent scope or you create an isolated one and explicitly inherit stuff from it.

BlogDashCourseCtrl:
    this.step = 'whatever'; //maybe $scope.step


SomeDirective:
return {
      ...
      require: '^BlogDashCourseCtrl',
      ...
      link: function($scope, iElm, iAttrs, blogDashCourseCtrl) {
          $scope.title = iAttrs.title; // Do not share me with other directives
          if($scope.title === blogDashCourseCtrl.step) { // $scope.step comes from a shared scope
              ...
          }
      }
}

Notice that blogDashCourseCtrl does not reference the $scope of that directive/controller, but the reference itself. There really is extensive documentation on this, with examples.