since i'm new here i'll introduce myself. name tomas netherlands , have started coding intensively. atm i'm working on project using angularjs write me interactive curriculum vitae. wanted have show when apply jobs. thus, things might have done harder have show can moment.
ok, question. i've run problem using angularjs directive in html body code.
the .js file is:
/** * created 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: "t.example@example.com", 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 html-code i'm using in index.html main page is:
<div class="right_information" ng-app="personapp" ng-controller="tomasinformation"> <person-info info="tomas"></person-info> </div> now problem calling <person-info> element doesn't give me first name etc, raw code on website, e.g. {{info.firstname}}.
i've checked things, whether angular library loaded (which case).
can see doing wrong? i'm @ loss here. p.s. i've altered personal data in controller calling/e-mailing not of use :)
edit: i've done f12 thing in browser (chrome) , saw following error output, can't seem understand means though.i've added stars in https since i'm not allowed post more 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 @ error (native) @ https*://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:6:417 @ na (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:67:19) @ fa (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:62:4) @ https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:65:406 @ https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:112:113 @ n.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:15) @ n.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:123:106) @ n.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:293) @ l (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:81:240) (anonymous function) @ angular.js:11655
and <head> of 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 angular.min.js loaded. because when remove <person-info> tags , insert template code directly, works :/
is code have in application? alainlb has shown in plunkr, code works.
but error seeing caused colliding directives.
from angular documentation:
example scenarios of multiple incompatible directives applied same element include:
- multiple directives requesting isolated scope.
- multiple directives publishing controller under same name.
- multiple directives declared transclusion option.
- multiple directives attempting define template or templateurl.
check app of these scenarios.
Comments
Post a Comment