WebStorm Angular directive scope & HTML

Question

Since I'm new here I'll introduce myself. My name is Tomas from the Netherlands and I have just started coding intensively. Atm I'm working on a project using AngularJS to write me an interactive Curriculum Vitae. I wanted to do this so I have something to show when I apply for jobs. Thus, some things I might have done harder than they could have just to show what I can do for the moment.

Ok, back to the question. I've run into a problem using an AngularJS directive in my HTML body code.

The .JS file is:

/**
 * Created by Tomas on 24-1-2016.
 */
var myApp = angular.module("PersonApp",[])

.controller("TomasInformation", ["$scope", function($scope, $routeParams) {
    $scope.tomas = {
        firstName: "Thomas",
        lastName: "Slepers",
        middleNames: "Dirk",
        dateOfBirth: new Date("1985","03","18"),
        placeOfBirth: "Rosmalen",
        city: "Maastricht",
        address: ["Banniersborg", "176", "B", "6238 VS"],
        telephone: "+31 6386492",
        email: "[email protected]",
        nationality: "Dutch"
    };
}])

.directive('personInfo', function() {
    return {
        restrict: "E",
        scope: {
            info: "="
        },
        templateUrl: 'JS/personInfo.html'
    };
});

The template .html file I'm calling is:

<ul>
    <li>{{info.firstName}} {{info.lastName}} </li>
    <li>{{info.firstName}} {{info.middleNames}}</li>
    <li>{{info.dateOfBirth | date}}</li>
    <li>{{info.placeOfBirth}}</li>
    <li>{{info.city}}</li>
    <li>{{info.address[0]}} {{info.address[1]}}{{info.address[2]}}, {{info.address[3]}}</li>
    <li>{{info.telephone}}</li>
    <li>{{info.email}}</li>
    <li>{{info.nationality}}</li>
</ul>

And the html-code I'm using in the Index.html main page is:

<div class="right_information" ng-app="PersonApp" ng-controller="TomasInformation">
   <person-info info="tomas"></person-info>
</div>

Now the problem is that calling the <person-info> element doesn't give me my first name etc, but only the raw code on my website, e.g. {{info.firstName}}.

I've checked already some things, like whether the Angular Library is loaded (which is the case).

Can somebody see what I am doing wrong? I'm at a loss here. P.S. I've altered the personal data in the controller so calling/e-mailing will not be of any use :)

Edit: I've done the F12 thing in my browser (Chrome) and saw the following error output, can't seem to understand what it means though.I've added stars in the https since I'm not allowed to post more than 2 links :) . angular.js:11655 Error: [$compile:multidir] http://errors.angularjs.org/1.3.15/$compile/multidir?p0=personInfo&p1=personInfo&p2=template&p3=%3Cperson-info%20info%3D%22tomas%22%3E at Error (native) at https*://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:6:417 at Na (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:67:19) at fa (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:62:4) at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:65:406 at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:112:113 at n.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:15) at n.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:123:106) at n.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:293) at l (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:81:240) (anonymous function) @ angular.js:11655

And the <head> of the Index.html frontpage is:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="JS/app.js"></script>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title></title>
</head>

So I'm pretty sure the angular.min.js is loaded. Because when I remove the <person-info> tags and insert the template code directly, it works well :/

Sounds like a Javascript error. What is the browser console output? — Shlomo
if you have {{info.firstName}} in your page it mean you have an error. run you debugger ( press F12) , reload the page and tell us if you have error — AlainIb
The directive template is being shown as the OP mentioned, angular must be loaded then. — Prashant

Prashant Prashant · Accepted Answer · 2016-01-24T21:59:48

Is this all the code you have in the application? Like Alainlb has shown in the plunkr, this code works.

But the error that you are seeing is caused by colliding directives.

From Angular documentation:

Example scenarios of multiple incompatible directives applied to the same element include:

Multiple directives requesting isolated scope.

Multiple directives publishing a controller under the same name.

Multiple directives declared with the transclusion option.

Multiple directives attempting to define a template or templateURL.

Check your app for any of these scenarios.

WebStorm Angular directive scope & HTML

2 Answers