How to intercept the end of data-binding in Angular Js

Question

I am developing a web-application using Angular Js framework, with HTML5 and with the help of jQuery, when it is needed. The question is:

I have some fields whose values depend on the result of an AJAX call. This request returns a JSON and the fields of this JSON become the values of many tags.

For example, in the HTML code, I have:

<span>Data Nascita: <b><span id="patientBirthdate">{{patient.birthDate}}</span></b></span>

And in my controller, I have this request:

$.ajax({
    type: "GET",
    url: url,
    async: true,
    crossDomain: true,
    success:function(result){
        $scope.person = result;

    },
    error: function(xhr,status,error){
        console.log ("error in receiving person's data");
    }
});

This data-binding works properly.

The question is: how can I intercept the end of the operation of data-binding (the end of the filling of the {{patient.birthDate}} field) to somehow call on this field another javascript method?

My goal is to "shorten" the value of this field, after the filling made by Angular, with a jQuery plugin, with a call of this type:

$("#patientBirthdate").shorten({showChars: 15, moreText: ' >>', lessText: ' <<'});

Thanks in advance.

you don't need jQuery for anything you have shown. Use angular to do all of it. A simple directive and filter for the `shorten` and use `$http` for ajax. get out of jQuery thinking mode when working with angular — charlietfl, Jan 09 '15 at 08:54
This is the highest voted angular post on this site [“Thinking in AngularJS” if I have a jQuery background?](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background). — charlietfl, Jan 09 '15 at 09:16

Naeem Shaikh · Answer 1 · 2015-01-09T08:59:42.337

0

http://jsfiddle.net/SQuVy/751/ here is something you can do with $watch.

whenever change occures to an object callback is called,

ex.

angular.module('watchApp', []).controller('watchCtrl', function($scope) {
    $scope.count = 0;

    $scope.$watch('a', function() {
        // change happened here do something
        $scope.b=$scope.a;

//OR you can call your method here

        }, true);
    });

I am here assigning value of a to b when a is changed.

edited Jan 09 '15 at 08:59

answered Jan 09 '15 at 08:54

Naeem Shaikh

15,331
6
50
88

I know I am saying `$watch` can be used for the purpose.. its just an example – Naeem Shaikh Jan 09 '15 at 08:56
@charlietfl.. its just to tell any method can be there.. if there should or shouldnt be dom manipulation is not the context of this question. – Naeem Shaikh Jan 09 '15 at 08:58
1

so that's an excuse for providing an answer with bad practices in it? Put it in a directive where it belongs – charlietfl Jan 09 '15 at 08:59
1

@charlietfl removed it.. so its not a bad practice now.. is it ok? And making directive and all that stuff would quite complicate this answer.. OP just requires **how to intercept** – Naeem Shaikh Jan 09 '15 at 09:00

How to intercept the end of data-binding in Angular Js

1 Answers1