CODEWITHSUNDEEP
javascripthtmlangularjs
Rahul Jain
Rahul Jain

Reputation: 357

AngularJS directive is not getting data passed in scope

Here is my html snippet : 

<div ng-controller="ctrl">
<custom-tag
title = "name"
body = "content">
</custom-tag>
</div>

Here is controller and directive written:

var mod = angular.module("main_module",[]);

//Controller
mod.controller("ctrl",function($scope) {
  $scope.name="Page Title";
  $scope.content="sample_template.html";
  });

//Directive
mod.directive("customTag", function() {
  return {
    'restrict' : 'E',
    'scope' : {
      'title' : '=',
      'body : '='
      },
    'templateUrl' : 'directive_template.html'
    };
  });
<!-- directive_template.html -->

<div>
  <div>{{title}}</div>
  <div ng-include="'{{body}}'"></div>
</div>

The actual html rendered by directive is this :

<div>
  <div ng-binding></div>
  <!-- ngInclude: '{{body}}' -->
</div>

Clearly it is not getting the directive scope variables from attributes in <custom_tag>

Please tell me why it is happening and how I resolve this issue. Thanks

Upvotes: 0

Views: 44

Answers (1)

shaunhusain
shaunhusain

Reputation: 19748

Check the console for errors extra quotes and {{}} braces were breaking things.

<div>
  <div>{{title}}</div>
  <div ng-include="body"></div>
</div>

http://plnkr.co/edit/G9JfIJGhSghUbgkKLXnV?p=preview

Upvotes: 1

Related Questions