Help needed with directive


#1

It’s rather angular issue not ionic.
I want to create new HTML tag:

<location x="{{x}}" y="{{y}}"></location>

As the result I want to get distance from current position to given X and Y:

<div>Distance from current position is {{result}} kilometers</div>

How to use attributes in directive? What directive should look like?


#2

Maybe you need to explain it a bit better but could you just do :

<div>Distance from current position is {{x - y}} kilometers</div>

#3

No.
In that new directive I would have to do this operations:

  • Get current position
  • getDistance from given x and y to current position
  • return div with result

I know that I could do something like this:

<div>Distance from current position is {{calculateDistance($w, $y)}} kilometers</div>

but I want to know AngularJS better.


#4

I think I found my anwser here:


and here:


#5

I’m almost there. One problem

For tag:

<location x="10" y="50"></location>

My directive:

.directive("location", function(App) {
		  return {
			restrict: "E",
			scope: {
			  x:"@",
			  y:"@"
			},
			link: function(scope, element, attrs) {
			  console.log(scope); //I've got object
			  console.log(scope.x);  //blank value
			  console.log(attrs);  /I've got obcejt
			  console.log(attrs.x);  //blank value
			  scope.km=App.countDistance(attrs.x,attrs.y);
			},
			template: "<div>{{km}} {{x}} {{y}}</div>",
		  };
		})

problem is that I can’t get x and y value in link object as commented


#6

I’m eyeballing that like crazy and can’t see anything wrong.

See this : http://codepen.io/calendee/pen/eliFJ/

It does everything except your calculation and all works well.


#7

You’re it works.
In dead I had that code:

<location x="{{atrakcja.x}}" y="{{atrakcja.y}}"></location>

and data was from ajax - so at the beggining there was no value.
Sorry for bother.