AngularJS Essentials for Using Onsen UI Part 2

Part 2: Click Events and DOM Manipulation

We are going to learn how to add click events within apps developed with Onsen UI. This blog entry is in response to frequently asked questions from users who are familiar with jQuery but not with AngularJS.

We are going to register click events to buttons, and dynamically change CSS classes of HTML elements.

index.html

app.js

style.css

Let’s analyze the code. This is inside the body tag of index.html.

The “myApp” module is set in the body tag. Then underneath, the “clickCtrl” controller is set in the div element.

You can see here that the “ng-class” attribute is specified in the span element. The value specified by the ng-class element is data-bound to the controller’s model. This will allow us to control CSS classes that are added to the element specified by the ng-class from the controller side.

In this example, the “dynamic” value is specified by the ng-class.

<span ng-class="dynamic">Onsen UI</span><br/>

Next, let’s look at clickCtrl.

The clickCtrl controller is located within the myApp module. Inside clickCtrl, $scope.dynamic = “red”; is inserted. This code sets “dynamic” to “red” when launching Onsen UI for the first time.

The “red” CSS class is in style.css. Let’s look inside style.css:

.red{ color:#FF0000; }

The CSS class is defined to set the text color to red (#FF0000). This is why the text color of “Onsen UI” is red when launched the first time.

By using the ng-class like this, you have the flexibility to control CSS classes that are applied to the view from the controller side.

Let’s look at the next element in index.html . The “ng-click” attribute is added to the button element:

<button ng-click="changeToGreen()">Green</button>

This ng-click attribute value is also data-bound to M (the model) of the controller. The following function runs when the ToGreen() function presses the button where ng-click is added.

$scope.changeToGreen = function(){ 
$scope.dynamic = "green";
}

Because the $scope.dynamic value is changed to a different CSS class name inside this button, a different CSS class is applied to the span element every time a different button is pressed, changing the text colors.

This is how you can register click events in AngularJS.

Using jQuery in Onsen UI apps.

Compared with jQuery, AngularJS less frequently directly manipulates the DOM. This is probably because development of both was based on different concepts. However, jQuery methods can sometimes be more convenient to implement.

AngularJS incorporates jQLite, which is a compatible subset of jQuery. You can get DOM elements with the angular.element() function. If jQuery is loaded, it overwrites these functions.

If you want to use both AngularJS and jQuery, load jQuery first, and then load AngularJS. The following example calls the jQuery function in the controller.

Since DOM manipulation from within a controller is generally not recommended, you are better off using directives instead, once you get used to this procedure.

index.html

style.css

That’s all for today, and thank you for reading. In the next part, we will learn how to share data and functions between controllers by using AngularJS services.


Originally published at onsen.io on March 5, 2014.

Like what you read? Give Onsen UI & Monaca Team a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.