AngularJS directive is not getting data passed in scope

Question

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

Your directive is named customDirective, but your html is <custom-tag>... how is any of this working at all? — SteamDev
– SteamDev, Commented Sep 8, 2016 at 18:20
Sorry I actually renamed everything here. And in actual one, I didn't do this mistake.There is something else. Directive template is loading, only scope variables are not loading. — Rahul Jain
– Rahul Jain, Commented Sep 8, 2016 at 18:27

shaunhusain · Accepted Answer · 2016-09-08 19:06:52Z

1

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

answered Sep 8, 2016 at 19:06

shaunhusain

19.7k4 gold badges41 silver badges53 bronze badges

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

Collectives™ on Stack Overflow

AngularJS directive is not getting data passed in scope

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related