CODEWITHSUNDEEP
angularjsangularjs-directive
haki
haki

Reputation: 9759

Use parent controller required in directive

I'm trying to require two controllers on one of my directives, ngModel and my own.

The parent controllers should be injected to the child's link function, but I can't get it to work. I'm wondering what am I doing wrong ... 

app.directive('container', function () { 
  return { 
    transclude : true ,
    template : "<div ng-transclude></div>",
    controller : function ($scope) { 
      console.log('container controller');
      $scope.v1 = '123';
      $scope.f1 = function () { 
         console.log('f1');
      };
    },
    link : function (scope, element) { 
      console.log('container link');
    }
  };
});

app.directive('single', function () { 
  return { 
    require : ['^container','ngModel'], 
    scope : false , 
    link : function (scope, element, attrs , parentsCtrl) { 
      console.log('single link');
      console.log(parentsCtrl);

      var containerParent = parentsCtrl[0];
      var ngModel = parentsCtrl[1];

      // FAIL //
      console.log(containerParent.v1);
      containerParent.f1();
    }
  };
});

and the HTML

<div container>
  <input single type="text" ng-model="my.value" />
</div>

The single directive is injected with both controllers' constructors but the container controller is empty. I expected to find v1 property and f1 function.

Full jsbin example

Upvotes: 2

Views: 619

Answers (1)

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40296

With require the link function accesses the controller object, NOT the controller's scope. So this:

$scope.v1 = '123'; // WRONG

Should really be:

this.v1 = '123'; // RIGHT

To be accessed as containerParent.v1.

Upvotes: 8

Related Questions