Angular Directives and Routing

Question

I have an Angular app consisting of an HTML page, a view being routed to that page, and a template for a directive that I want to add to the view being routed.

The index.html page displays the view using ngRoute fine. I am trying to use angular charts withing the view that is being routed, but I can't get the chart to show up. The code for the html page being routed is:

    <!DOCTYPE html>

<html lang="en">
    <head>
    ...
    </head>
    <body>
        ---Some Code----
        <div create-chart></div>
    </body>
</html>

The "create-chart" element refers to the directive which creates a chart in a separate html template.

The code for constructing the directive is:

var app = angular.module('penny', ['ngRoute', 'pennyControllers']);
app.config(['$routeProvider', ...

var chart = angular.module('chart', ['chart.js']);
  app.directive('createChart', function () {
    return {
        restrict: 'E',
        templateUrl: '../chart/chart.html'
    };
  });

Does anyone know why the chart won't display?

Did you check your console?

dipesh
– dipesh

2016-05-14 17:06:43 +00:00
Commented May 14, 2016 at 17:06 — dipesh
– dipesh, Commented May 14, 2016 at 17:06

Pranab Mitra · Accepted Answer · 2016-05-14 17:09:11Z

1

"A" is for attribute, "E" is for element. Since you are calling the directive from an attribute so use the following:

restrict: 'A'

answered May 14, 2016 at 17:09

Pranab Mitra

3891 gold badge4 silver badges9 bronze badges

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

2 Comments

Nick Over a year ago

This seems to work but nothing shows up in the div. There is clearly an outline of where the chart should be but the chart doesn't show up. Any suggestions?

Pranab Mitra Over a year ago

Can you please create and share a fiddle with your existing code, so it will be easier to make this working.

jeremy-denis · Accepted Answer · 2016-05-14 17:07:50Z

0

In your code you have put restrict: 'E'

It's maybe not the reason but 'E' is for element.

With this you should used

<create-chart></create-chart>

First of all try restrict: 'A' to used <div create-chart></div>

answered May 14, 2016 at 17:07

jeremy-denis

6,8963 gold badges23 silver badges37 bronze badges

Collectives™ on Stack Overflow

Angular Directives and Routing

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related