set directive element attributes through parent controller AngularJS

Question

I want to configure my directive module through my app level controllers. Plunker

index.html

<div ng-controller="App">
  <foodz index="index"></foodz>
</div>

app.js

angular.module('app', ['foodz']).
  controller('App', ['$scope',function($scope){
    $scope.index = 1;
  }]);

foodz.js

angular.module('foodz', []).
  controller('foodzController', ['$scope',function($scope){

    //Data is coming in through external API
    $scope.$on('foodzFetched', function(e,d) {
      $scope.foodz = d;
    });

    //Lets say data to looks like:
    //[{"name":"banana"},{"name":"smoothy"}]
  }]).
  directive('foodz', function() {
    return {
      restrict: 'E',
      scope:{
        index: '@'
      },
      replace: true,
      controller: 'foodzController',
      templateUrl: 'foodzTemplate.html',
      link: function(scope, controller) {}
    };
});

foodzTemplate.html

<div ng-controller="foodzController">
  <span>
    {{foodz[index].name}}
  </span>
</div>

So in this example, I am trying to pass the index through my app level controller into an attribute of my directive element which also has its own controller.

What am I doing wrong here?

What is the problem you are facing. Can you try to create a fiddle. — Chandermani
– Chandermani, Commented Sep 9, 2013 at 16:26

Ryan B · Accepted Answer · 2013-09-09 16:47:10Z

2

Try to make scope:{index:'='}

Look at Directive Definition Object

I think you are receiving index='index' (as string) in your controller. Using = it will get the value from parent controller.

edited Sep 9, 2013 at 16:47

Ryan B

3,35723 silver badges35 bronze badges

answered Sep 9, 2013 at 16:27

digao_mb

1,29416 silver badges23 bronze badges

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

1 Comment

Dan Kanze Over a year ago

+1 Thank you this was just what I needed. I should have read docs closer haha.

Collectives™ on Stack Overflow

set directive element attributes through parent controller AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related