Shaun Xu

The Sheep-Pen of the Shaun


News

logo

Shaun, the author of this blog is a semi-geek, clumsy developer, passionate speaker and incapable architect with about 10 years’ experience in .NET and JavaScript. He hopes to prove that software development is art rather than manufacturing. He's into cloud computing platform and technologies (Windows Azure, Amazon and Aliyun) and right now, Shaun is being attracted by JavaScript (Angular.js and Node.js) and he likes it.

Shaun is working at Worktile Inc. as the chief architect for overall design and develop worktile, a web-based collaboration and task management tool, and lesschat, a real-time communication aggregation tool.

MVP

My Stats

  • Posts - 122
  • Comments - 542
  • Trackbacks - 0

Tag Cloud


Recent Comments


Recent Posts


Article Categories


Archives


Post Categories


.NET



In my project I'm using SignalR and Angular.js to make the page real-time. But I found a slightly problem. It's a little bit hard to notice user when something changed if there are a lot of fields in the page. Hence I decided to create a small directive which will apply highlight style when it the model value was changed.

 

Below is how it looks like. And you can play with it on my Plunker.

ezgif.com-optimize (1)

Step 1

Download and include the source code of this directive from Github.

 

Step 2

Add dependency to your Angular.js application. Just like the code in Plunker.

   1: var app = angular.module("Demo", ['sx.changeHighlight']);

 

Step 3

Apply this directive in any element you want. It will apply the "text-shadow" style for this element. Also need to specify which value in $scope it will be watching, which means when the value was changed, it will apply highlight style on this element.

In the code below my directive is monitoring $scope.name and when it's changed, the "p" element will apply highlight style.

   1: <p sx-change-highlight ng-model="name">
   2:   Hello, my name is {{name}}.
   3: </p>

It's worth mentioning that you can monitor on anything in $scope, regardless whether it will be displayed in the content your directive was attached or in your page. And besides, you can apply this directive in any element.

In the code below, I applied this directive in a table row.

   1: <td sx-change-highlight ng-model="target.status" ng-class="getStatusTextClass(target.status)">{{target.status | jobStatus}}</td>

 

Step 4 (Optional)

There are some options you can define for the highlight style listed below.

Attribute Description Default Value
timeout How long the highlight style will be faded out. 1 second.
interval Interval highlight style will be faded out from highlight style to normal style. 0.1 second.
skip How many times it will NOT apply highlight style when model changed. This is useful if it's changed when page loaded. 1
blurRadius The redius value of "text-shadow" style. 10
color The highlight color. #337ab7

 

Hope this helps,

Shaun

All documents and related graphics, codes are provided "AS IS" without warranty of any kind.
Copyright © Shaun Ziyan Xu. This work is licensed under the Creative Commons License.

Comments

Gravatar # re: Angular Directive to Show Highlight Style when Model Changed
Posted by Monica on 4/10/2015 8:31 AM
I always wanted to understand programming, but apparently the efforts I have made ​​in this regard were not enough , because I still consider myself as a beginner in this technological area. I hope that your blog will help me to decipher the mysteries of logic programming.
Rosa
Post A Comment
Title:
Name:
Email:
Comment:
Verification: