CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scope
Kevin Smith
Kevin Smith

Reputation: 45

AngularJS directive calling another directive is not passing data correctly to render with $compile

I am trying to dynamically hydrate data with data driven directives and a function with $compile in which I want to display specific data.

The directive properly calls another directive but it is not passing over the variable

var fred = [];
$scope.fred = {name:'fred'}

$scope.fred = {name:'fred'}
fred.push('<my-directive data={{fred}} > duh</my-directive>')

$("#directives").append($compile(x)($scope))

the other directive has 

template: '<h1>Whats Up {{fred}}</h1>',

Ignore the "test" directive

Here is a jsfiddle http://jsfiddle.net/sm98xx55/

How can i pass and render that data from the function ctrl to directive "myDirective" ?

Upvotes: 1

Views: 45

Answers (1)

Abraham Gnanasingh
Abraham Gnanasingh

Reputation: 897

Working Fiddle - http://jsfiddle.net/es6kppzp/1/

You added text inside scope on myDirective which is an unknown property(means you are not passing). And template <h1>Whats Up {{fred}}</h1> should be <h1>Whats Up {{data}}</h1>. Finally pass the correct $scope value in controller so that it will pass to your directive and bind as you expected. Check this,

var module = angular.module('testApp', [])
  .directive('myDirective', function($compile) {
    return {
      restrict: 'E',
      scope: {
        data: '@'
      },
      template: '<h1>Whats Up {{data}}</h1>',
      controller: function($scope, $element) {

      }
    };
  });

function crtl($scope, $compile) {
  var vm = this;
  var fred = [];
  $scope.host = "jimmy";
  $scope.fred = {name:'fred'}
  fred.push('<my-directive data={{fred.name}}> duh</my-directive>')
  fred.push('<my-directive data={{host}}> monkey </my-directive>')
  fred.push('<my-directive data={{host}}> brains </my-directive>')
  fred.push('<my-directive data={{host}}> </my-directive>')
  fred.forEach(function(x) {
    //console.log(x)
    $("#directives").append($compile(x)($scope));
  });
}

Upvotes: 1

Related Questions