CODEWITHSUNDEEP
javascriptangularjs
Dan Beaulieu
Dan Beaulieu

Reputation: 19954

Pass a value from parent directive template to child directive

Problem:

I'm attempting to pass a value from an ng-repeat into a child-directive but when I try to access my passed variable in directive 2 I get "undefined".

Here's an illustration of what I am attempting. Basically directive 1 represents an array of widgets while directive 2 represents a single widget. I am attempting to pass an item from the ng-repeat loop into my child directive.

enter image description here

My Attempt:

Here's a simplified version of my directive 1 template:

<li ng-repeat="item in widgets">
    <directive2 item="item"></directive2>
</li>

Here's a simplified version of directive 2:

angular.module('directive2').directive(
    ['$compile', '$rootScope',
    function ($compile, $rootScope) {
        return {
        restrict: 'E',
            scope: { item: '=' },
            templateUrl: 'ext-modules/tile/widgetTemplate.html',
            link: function (scope, element, attrs) { 
                console.log(scope.item); // undefined
            }
        };
    }]);

The ng-repeat on widgets creates two items and I have verified that the data exists. The application works fine and doesn't throw an error but my console.log returns : undefined.

My Question:

How can I pass a value from a directive template's ng-repeat into a child-directive?

here's a fiddle: http://jsfiddle.net/3znEu/112/

Upvotes: 4

Views: 886

Answers (3)

masa
masa

Reputation: 2800

Yet another solution proposal:

HTML:

<div ng-controller="MyCtrl">
  <directive1></directive1>
</div>

JavaScript:

angular.module('myApp', [])
  .controller('MyCtrl', ['$scope', function ($scope) {
    $scope.widgets = [
      'a', 'b', 'c', 'd'
    ];
   }])
.directive('directive1', function () {
  return {
    restrict: 'E',
    scope: false,
    template: 
      '<li ng-repeat="item in widgets">' +
        '<directive2 item="item"></directive2>' +
      '</li>'
  }
})
.directive('directive2', ['$compile', '$rootScope',
  function ($compile, $rootScope) {
    return {
      restrict: 'E',
      scope: { item: '=' },
      template: 
        '<div>elem = {{item}}</div>',
      link: function (scope, element, attrs) { 
        console.log(scope.item);
      }
   }
}]);

Fiddle: http://jsfiddle.net/masa671/dfn75sp3/

Upvotes: 2

Pratik Bhattacharya
Pratik Bhattacharya

Reputation: 3746

I have modified your fiddler a bit http://jsfiddle.net/3znEu/115/.
Few changes
1. Added a restrict to your directive.
2. Added a template to render the Items (only for testing and demo)
3. Changed items in scope from '@' to '='

angular.module("myApp").directive("directive1", function(){
return {
restrict: 'E',
scope: {

  item: "="
},
template: "{{item}}"
}
});

Upvotes: 1

jonasnas
jonasnas

Reputation: 3580

It works fine when you put directive2 as directive name, not module:

http://jsfiddle.net/3znEu/113/

      'use strict';

       var app = angular.module('myApp', [])
        .controller('myController', ['$scope', function($scope) {
            $scope.greeting = 'Hello World!';
            $scope.widgets = ["111","222","333"]
        }]);

        app.directive('directive1',
            ['$compile', '$rootScope',
            function ($compile, $rootScope) {
                return {
                restrict: 'E',
                    scope: { item: '=' },
                    template: '<div>{{item}}</div>',
                    link: function (scope, element, attrs) { 
                        console.log(scope.item); // undefined
                    }
                };
            }]);

Upvotes: 2

Related Questions