Tag: AngularJs

Prevent ng-click action on hitting enter


I was doing a functionality in the project I’m currently working, I captured the onKeypress event to capture the enter key when the user finish editing in a form, I also had a button to do another action with an ng-click directive, something like this code:


Try This:

I’m currently writing a post about it because I thought it was a bug in the angular core functionality or some code I had written in other place within the application(it wasn't, I'll explain later), and it was affecting then my functionality. I was trying to figured out by myself before I search for this problem in internet.



Book Tip

ng-book - The Complete Book on AngularJS
Ready to master AngularJS? What if you could master the entire framework – with solid foundations – in less time without beating your head against a wall?



The first thing that came to my mind was to do a directive to capture the enter key in the button and dismiss it

Continue reading "Prevent ng-click action on hitting enter"

Best practice to include code within the cycle digest in AngularJs

I was converting a DurandalJs (using BreezeJs for the async calls) application to AngularJs, the team decided to keep using BreeseJs with AngularJs, so I started notice that when I update a $scope variable (to update the view) the change wasn’t reflecting in the view.
I realized that the problem was that when you try to update an $scope variable when a promise come back, this operation is done outside the angular digest cycle, and that’s why it was not updating the view.
This only happens when you deffer a call outside Angular (you can prevent this using the $http and $q services).

The first solution I came across, was to call $scope.$apply(). But I start receiving this error:
Error: $digest already in progress

It means your $scope.$apply() isn't high enough in the call stack (digest cycle).

I kept looking and I found this code.

if(!$scope.$$phase) {
   //$digest or $apply

Continue reading "Best practice to include code within the cycle digest in AngularJs"

KnockoutJs computed equivalent AngularJs

Recently, I had to work in a project, where I had the opportunity of convert a DurandalJS (KnockoutJs) application into AngularJs, and I faced a couple of challenges that I would like to share with you:
KnockoutJs computed equivalent AngularJs

The Subscribe:

First challenge was to find the Angular equivalent of a knockout observable subscribe:
this was get from the Knockoutjs documentation:

var myViewModel = {
    personName: ko.observable('Bob')

myViewModel.personName.subscribe(function(oldValue) {
    alert("The person's previous name is " + oldValue);
}, null, "beforeChange");

Continue reading "KnockoutJs computed equivalent AngularJs"

ng-repeat onFinishRender directive AngularJs

There are some specific scenarios specially when you manipulate the DOM with ng-repeat directive. Lets imagine we have a code that prints a list of element using an ng-repeat. In your controller you have a code to instantiate a bootstrap tooltip for all the elements that are going to be rendered when the ng-repeat is compiled by AngularJs. As a best practice it is better to place this type of code in a directive, for this example purpose, we are going to keep it simple and leave it in the controller.


onFinishRender directive AngularJs

onFinishRender directive AngularJs

The problem here is that the code within the controller is executed before angular compiles the ng-repear, before the DOM elements are part of the HTML. It is hard if not impossible, to find a place to bind events to the elements of an ng-repeat, since angular doesn't provide any event that fires when the elements finish rendering. Here we are going to share haw to create an event onFinishRender directive.

I created this simple directive to capture the moment that the last element is inserted in the DOM,  with this we will be able to call a JavaScript method after the ng-repeat completes the rendering process.

this is the View:

  <li ng-repeat="item in items" on-finish-render="callMyCustomMethod()">
      dummy Text


Here is the onFinishRender directive:


.directive('onFinishRender',['$timeout', '$parse', function ($timeout, $parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {

Continue reading "ng-repeat onFinishRender directive AngularJs"