Inject a variable into an Angular Controller from a Angular Directive

Question

Updating as there is some confusion as to what I am asking. I would like to use a directive to inject a variable into the controller used by that directive. I realize I can use the $scope for that, but I don't find that an intuitive solution.

Essentially I want my controller to have the proposal variable injected into it.

My intended usage:

<blah-directive proposal="proposal"></blah-directive>

The directive (so far):

app.directive('blahDirective', function () {
    return {
        restrict: 'E'
        , transclude: true
        , replace: true
        , scope: {
            proposal: '='
        }
        , templateUrl: 'blahTemp.html'
        , controller: blahController
    };
});

blahTemp.html

<form class="form-horizontal" role="form" name="myBidForm">
    **{{ proposal }}**    
</form>

this is displaying the value proposal variable in the $scope fine, but it is not what I want. Essentially I would like to define my controller like:

var blahController = function($scope, SomeOtherResource, proposal) {


}

Why do you want to inject te directive? Your directive makes the directive available in the scope. Just use $scope.proposal = .. — JvdBerg
– JvdBerg, Commented Jan 16, 2014 at 20:58
Y - I don't think that solution is obvious solution on the Controller side. If someone picks up the controller they may not read the documentation and no idea how that variable got into scope. — akaphenom
– akaphenom, Commented Jan 16, 2014 at 21:02
I don't understand what you want to do. The scope that's being injected to your controller is the isolated scope (because it's the directive's controller) so why are you making a two-way-data-binding to the parent scope? — Ilan Frumer
– Ilan Frumer, Commented Jan 16, 2014 at 21:05
When you create a directive with isolated scope and that directive has a controller, they should probably be coupled. They already share the same $element/$transclude/$scope/$attrs. If you want proposal to be injected everywhere you must define it as a provider(service). — Ilan Frumer
– Ilan Frumer, Commented Jan 16, 2014 at 21:34
It's not that it's unintuitive, you appear to be trying to do something that directives aren't meant to do, or are resisting using the $scope in the way it is there for you. @IlanFrumer's suggestion makes the most sense. — Mendhak
– Mendhak, Commented Jan 16, 2014 at 21:36

Ilan Frumer · Accepted Answer · 2014-01-16 22:21:05Z

3

If you want to inject locals into a controller use $controller.

Here is an example (plunker):

app.directive('blahDirective', function ($controller) {
  return {
    restrict: 'E',
    scope: {
      proposal : "="
    },
    transclude: true,
    replace: true,
    templateUrl: 'blahTemp.html',
    link : function (scope, elm, attrs){
      scope.proposal = {};
      var locals = {
        $scope: scope , 
        proposal: scope.proposal
      };
      $controller('blahController', locals);
    }
  };
});

edited Jan 16, 2014 at 22:21

answered Jan 16, 2014 at 22:04

Ilan Frumer

32.4k8 gold badges73 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

akaphenom Over a year ago

That looks to be what I was seeking. I am getting an "unknown provider proposalProvider" so I think I have typed something wrong. I know it is on my end - the plunkr makes sense and works- so I need to dig into what I am doing wrong.

Ilan Frumer Over a year ago

Check your locals object

Collectives™ on Stack Overflow

Inject a variable into an Angular Controller from a Angular Directive

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related