- Part 2

Du Bist Unsere Letzte Hoffnung!

March 26, 2015 by blogmeister·0 Comments

Hey Soldat! Bist du bereit, um alles für diese Welt zu machen. Du bist ein Soldat und natürlich bereit dafür! Hounds Online ist ein im April kommendes MMO-RPS Spiel, das von Netmarble Games entwickelt ist.

Im Hounds wirst du gegen gefährliche Wickbrokes kämpfen. Wenn du vor offizieller Release Hounds anspielen willst, kannst du dich natürlich zu geschlossener Beta über diesen Link www.houndsonline.com anmelden.

Hounds: The Last Hope wird das Beste seines Genres ist und eigentlich ist es so schon. Im Hounds kannst du von den Klassen Assault, Tech, Specialist oder Support wählen.. und auch von den Protagonisten hast du viele Auswähle.

Diese Welt ist schon okkupiert und der einige Beisein, der diese Welt befreien kann, ist der Menschenschlag. Die Wickbrokes sind sehr gefährlich, schnell und hungrig.

Was zu tun gegen sie? Wie werden wir diese Welt befreien? Begleite uns, sei ein Soldat in Hounds-Soldaten und lass uns mit dir stärker sein.

Numbers Only Directive In Angular JS

March 13, 2015 by blogmeister·0 Comments

This is my custom version of an Angular JS Directive to ensure input values are digits only.

amodule.directive('numbersOnly', function() {
	return {
		restrict: 'A',
		require: '?ngModel',
		link: function (scope, element, attrs, ngModel) {
			if (!ngModel) return;
			ngModel.$parsers.push(function(val) {
				var parsed = val.replace( /[^0-9]+/g, '');
				if (val !== parsed) {
					ngModel.$setViewValue(parsed);
					ngModel.$render();
				}
				return parsed;
			});
		}
	};
});

amodule.directive('numbersOnly', function() {

return {

restrict: 'A',

require: '?ngModel',

link: function (scope, element, attrs, ngModel) {

if (!ngModel) return;

ngModel.$parsers.push(function(val) {

var parsed = val.replace( /[^0-9]+/g, '');

if (val !== parsed) {

ngModel.$setViewValue(parsed);

ngModel.$render();

}

return parsed;

});

}

};

});

You can then use the directive in the input field like this:

<input type="text" numbers-only/>

1	<input type="text" numbers-only/>

Using ng-pattern regex is good only for validation but does not hinder the user from inputting non-numeric characters so having a directive like this makes it even better to be sure that inputs are numeric only.

Angular JS ng-view Height Problem

March 8, 2015 by blogmeister·0 Comments

When I used a bootstrapped 3.0 template together with Angular JS, I found out that the height of the DIV layer where ng-view resides does not change its height to fill the window viewport height if its content height is small.

I have not found any solution in any forum regarding this problem so what I did was to create a directive and added it to the HTML element where ng-view is located.

My template contains only a horizontal bar at the top, while the bottom is occupied by the content where ng-view is.
This is my HTML:

<body ng-controller="AppCtrl">
    <div id="main_navbar" class="navbar">
        ....
    </div>
    <div class="container-fluid-full" ng-view resize>
    </div>
</body>

....

</div>

</div>

</body>

This is my directive:

AppIndex.directive('resize', function ($timeout) {
	return {
		restrict: 'A',
		link: function(scope, elem, attrs, controller) {
			angular.element(document).ready(function () {
				$(window).resize();
				$timeout(function() {
					if (($(elem).height()  + $('#main_navbar').height()) < $(window).height()) {
						$(elem).css('height', ($(window).height() - $('#main_navbar').height()) + 'px');
					}
				});
			});
		}
	};
});

AppIndex.directive('resize', function ($timeout) {

return {

restrict: 'A',

link: function(scope, elem, attrs, controller) {

angular.element(document).ready(function () {

$(window).resize();

$timeout(function() {

if (($(elem).height() + $('#main_navbar').height()) < $(window).height()) {

$(elem).css('height', ($(window).height() - $('#main_navbar').height()) + 'px');

}

});

}

};

});

What the code does, is that once the ng-view works its magic and populates the HTML contents to the DIV layer, the Angular JS Directive will wait for the DOM till it is ready. Angular JS also has its own way to detect if a DOM is ready the same way JQuery does, but with a different syntax.

Once it is ready, I call on the $(window).resize() function to simulate a window viewport resize, then do the formula to adjust the height of the DIV content layer to fill the extra height of the window viewport.

Without calling the resize() function the height adjustment will not work when, say, you have a tab element and one of those tabs contains small content.

If you have a footer at the top, then simply add the footer height to the computation.

Tech Tips & Tricks

tech tips gadgets programming software

Month: March 2015

Du Bist Unsere Letzte Hoffnung!

Numbers Only Directive In Angular JS

Angular JS ng-view Height Problem