user2422960
user2422960

Reputation: 1526

Passing an object to a directive as an argument

I have a view and a controller for it:

<app-head options="options"></app-head>

app.controller('homeCtrl',function($scope){
  $scope.options = {
    first: {
        description: "A link",
        link: "../"
    },
    second:{
        description: "Another link",
        link: "../../"
    }
  };
});

I want to use the object options within my directive:

app.directive('appHead',function(){

  return{
    restrict: 'E',
    templateUrl: 'partials/modules/appHead.html',
    replace: true,
    controller: function($scope,$element,$attrs){
      $scope.options = $attrs.options;
    }
  }
});

When i call console.log($scope.options) in my directive's controller however, it will return options No Properties

Why is that and how do i accomplish this?

Upvotes: 0

Views: 49

Answers (1)

Satpal
Satpal

Reputation: 133403

Try this

app.directive('appHead',function(){
    return{
        scope: { 
            options: '=', 
        },
        restrict: 'E',
        templateUrl: 'partials/modules/appHead.html',
        replace: true,
        link: function($scope,$element,$attrs){
            // $scope.options 
        }
    }
});

Working Demo

Upvotes: 2

Related Questions