angular - dostęp do właściwości kontrolera

Witam,

Tworze sobie prostą aplikacje web opartą na angular i jquery. Sprawa wygląda tak, że mam zdefiniowany kontroler wewnątrz którego mam kilka właściowśći oraz jedna dyrektywe. Dyrektywa ta zwraca pewną funkcje w której chciałbym mieć dostęp do property kontrolera, ale np. zwykłe

this.var = 5;

czy

$scope.var = 5;

nie działa.

Kod kontrolera:

app.controller('dotsKillerCtrl', function($scope){
	$scope.points = 0;
	$scope.displaySpeed = 400;
	$scope.growSpeed = 2;
	$scope.init = function() {
		var newDot = setInterval(function(){ 
			$scope.growDots();
		}, this.displaySpeed);
	};
	$scope.randomInt = function() {
		return Math.floor(Math.random() * (95 - 5 + 1) + 5);	
	};
	/*
	$scope.generateDots = function() {
		
	};
	*/	
	$scope.growDots = function() {
		$('.dot').each(function(){
			var dotWidth = $(this).css('width'),
				dotHeight = $(this).css('height'),
				dotRadius = $(this).css('border-radius');
			
			dotWidth = dotWidth.replace('px', '');
			dotWidth = Number(dotWidth);
			
			dotHeight = dotHeight.replace('px', '');
			dotHeight = Number(dotHeight);
			
			dotRadius = dotRadius.replace('px', '');
			dotRadius = Number(dotRadius);
			$(this).animate({
				width: dotWidth + $scope.growSpeed,
				height: dotHeight + $scope.growSpeed,
				'border-radius': dotRadius + $scope.growSpeed,
				'margin-left': dotWidth - ((dotWidth / 2) * 3),
				'margin-top': dotHeight - ((dotHeight / 2) * 3)
			},200);	
		});	
	};
	$scope.killDot = function(){
		$(this).addClass('clicked');		
	};
});

app.directive("dot", function() {
  var linkFunction = function(scope, element, attributes) {
    var paragraph = element.children()[0];
    $(element).on("click", function() {
    	var dotWidth = $(this).css('width'),
			dotHeight = $(this).css('height'),
			dotRadius = $(this).css('border-radius'),
			dotMl = $(this).css('margin-left'),
			dotMt = $(this).css('margin-top');
			
			dotWidth = dotWidth.replace('px', '');
			dotWidth = Number(dotWidth);
			
			dotHeight = dotHeight.replace('px', '');
			dotHeight = Number(dotHeight);
			
			dotRadius = dotRadius.replace('px', '');
			dotRadius = Number(dotRadius);
			
			dotMl = dotMl.replace('px', '');
			dotMl = Number(dotMl);
			
			dotMt = dotMt.replace('px', '');
			dotMt = Number(dotMt);
			
			$(this).animate({
				width: dotWidth - 10,
				height: dotHeight - 10,
				'border-radius': dotRadius -10,
				'margin-left': dotMl + 5,
				'margin-top': dotMt + 5
			},200);
			
			dotWidth = $(this).css('width');
			dotWidth = dotWidth.replace('px', '');
			dotWidth = Number(dotWidth);
						
			if(dotWidth <= 5){
				$(this).remove();
				/* 
				tutaj chciałbym inkrementować wartość $scope.points
				*/
			};	
    });
  };

  return {
    restrict: "E",
    link: linkFunction
  };
});

Tam gdzie zaznaczyłem, wewnątrz linkFunction() chciałbym mieć możliwość operowania na wartościach $scope.points.

Nie pisze w angularze, ale tak drobna rada ogólna:

Zamiast:

var dotWidth = $(this).css('width'),
    dotHeight = $(this).css('height'),
    dotRadius = $(this).css('border-radius');

dotWidth = dotWidth.replace('px', '');
dotWidth = Number(dotWidth);

dotHeight = dotHeight.replace('px', '');
dotHeight = Number(dotHeight);

dotRadius = dotRadius.replace('px', '');
dotRadius = Number(dotRadius);

coś takiego:

var dotWidth = this.offsetWidth,
    dotHeight = this.offsetHeight,
    dotRadius = $(this).css('border-radius').slice(0, -2);

Cała reszta podobnie.

ciekawe pytanie, bede obserwował ten wątek

Nie widzę, jak wywołujesz "dot", ale możesz w parametrach przekazać $scope.points. Wtedy, w Twojej dyrektywie będzie cos w stylu:

var linkFunction = function(scope, element, attributes) {
//...
 	if(dotWidth <= 5){
	        $(this).remove();
               scope.points++;
	};    
//...
});
return {
	restrict: "E",
	link: linkFunction,
	scope: {
      		points: '='
    	}
  };

A parametr przekazujesz tak:

<dot points="points"></dot>

@shagrin

Chyba właśnie o to mi chodziło

scope.points++;

, tylko, że ja dawałem jeszcze dolara przed. Akurat returnować tego w dyrektywie chyba nie muszę, bo do tej właściwości odwołuje się z kontrolera i wyświetlam bezpośrednio w template za pomocą ekspresji.

Pytanie jeszcze jedno. Gdy w kontrolerze deklaruje sobie takie coś:

$scope.akcja = function() {
	$scope.points += 10;
};

i np. przypiszę to za pomocą ng-click do jakiegoś buttona, to wyświetlane punkty w innym divie za pomocą ekspresji są odświeżane automatycznie (jak dobrze rozumiem to jest właśnie ten two-way binding).

Z kolei gdy w dyrektywie, po pewnej akcji (jak w powyższym przykładzie jest wywoływany)

scope.points++;

to punkty co prawda są przypisywane, ale nie ma tego automatycznego bindowania.
Da się to jakoś rozwiązać ?

Tutaj jest kod html, punkty jako liczby są wyświetlane w div "points-right".

Moje kropki pojawiają się randomow w pewnych miejscach wewnątrz diva "game-container". Co ciekawe, jeśli wywale dot wstawionego na sztywno do html, to na reszte pojawiających się dynamicznie dot, akcja z dyrektywy nie działa. Jeśli zostawię tego jednego w html, to akcje z dyrektywy (click) działają tak jakbym chciał.

<header>
	<div class="menu-left">
		<img class="display-menu" alt="display menu" src="img/burger_ico.png">	
		<img class="logo" alt="dots killer logo" src="img/logo.png">		
	</div>
	<div class="points-right">
		{{ points }}
	</div>		
	<div class="clear"></div>
</header>
	
<div class="game-container">
	<dot class="dot dot-start"></dot>	
</div>

A nie zapomniałeś zmienić:

<div class="game-container">
   <!-- <dot class="dot dot-start"></dot> -->
	<dot class="dot dot-start" points="points"></dot> 	   
</div>

Zakładam, ze wszystko jest w scopie kontrolera, tak?

Udało mi się rozwiązać problem.

Do kodu wewnątrz if

if(dotWidth <= 20){
	$(this).remove();
	scope.points++;
};

dodałem

scope.$apply();

I działa pięknie. Wygląda na to, że apply() aktualizuje zmienne wyświetlane w widoku.
W każdym razie dzięki za pomoc i zainteresowanie :).

Polecam uczenia sie dobrych praktyk piszac w angularze: https://github.com/johnpapa/angular-styleguide

Na pohybel frontendowcom!