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
– Shlomo, Commented Jan 24, 2016 at 21:44
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
– AlainIb, Commented Jan 24, 2016 at 21:45
The directive template is being shown as the OP mentioned, angular must be loaded then. — Prashant
– Prashant, Commented Jan 24, 2016 at 21:47

Prashant · Accepted Answer · 2016-01-24 21:59:48Z

0

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.

answered Jan 24, 2016 at 21:59

Prashant

8,1503 gold badges27 silver badges25 bronze badges

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

Comments

Togren · Accepted Answer · 2016-01-24 22:06:49Z

0

I'm sorry that I have bothered. It seemed the problem was very simple and your answers gave me the right way to go.

I was reviewing the directive statement and changed, for the sake of testing, the name of the directive from "personInfo" to testTestTest. This due to the fact that the template I'm calling in the directive also is called personInfo, but then with extension HTML.

This obviously did the trick. It seems these statements interfered and now it works and I can continue :) Thank you for the help :)

answered Jan 24, 2016 at 22:06

Togren

2111 gold badge3 silver badges8 bronze badges

Collectives™ on Stack Overflow

WebStorm Angular directive scope & HTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related