Tag: AngularJs

Prevent ng-click action on hitting enter

logo-angularjs

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

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?


Amazon

 

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:
http://knockoutjs.com/documentation/observables.html

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.

$('.yourDynamicallyCreatedElements').tooltip("text")

 
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:

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

 
 

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 () {
                    scope.$emit('ngRepeatFinished');
                    if(!!attr.onFinishRender){
                      $parse(attr.onFinishRender)(scope);
                    }
                });
            }
        }
    }
}])

Continue reading “ng-repeat onFinishRender directive AngularJs”