extract binded angularjs data from html elements with angularjs directive

Question

My directive contains an javascript object. I try to find with jquery all html elements which are binding to this javascript object. How can I get the binded data of the angularjs object with jquery?

Maybe the above code explains better my plan.

angular.module('app').directive('highlight', [
    '$rootScope', '$compile', function ($rootScope, $compile) {
        return {
            replace: true,
            templateUrl: 'highlight.html',
            link: function (scope, element, attrs) {

                //this data object do we need to highlight
                scope.Tohighlight;

                $($.find('input, select')).each(function () {
                    //todo extract data if input or selection are binding data
                    //<input type="x" data-ng-model="data" /></span>
                    var data = angular.extractDataFromhtmlelement($(this));
                    //if html element contains our data add some css stuff
                    if(data ==  scope.Tohighlight)
                    {

                    }
                });
            };
    }
]);

I don't know if there exists an angularjs method for my purpose. How can I get the binded angularjs data model of an jquery object? Thanks.

I have updated my answer stackoverflow.com/a/26578630/947687. Is it helpful for you? — dizel3d
– dizel3d, Commented Oct 27, 2014 at 8:54

dizel3d · Accepted Answer · 2014-10-27 08:56:13Z

1

You may do it using scope() method and $parse service. Example

link: function(scope, element) {
    var inputElement = element.find('input');
    var inputModelGetter = $parse(inputElement.attr('ng-model'));
    var inputModelSetter = inputModelGetter.assign;
    function getInputModel() {
        return inputModelGetter(inputElement.scope());
    }
    function setInputModel(value) {
        inputModelSetter(inputElement.scope(), value);
    }
    // ...
}

edited Oct 27, 2014 at 8:56

answered Oct 26, 2014 at 22:17

dizel3d

3,6681 gold badge26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Briefkasten Over a year ago

Thanks. But with element.find().scope() I do get the viewmodel of the element not the binding object/property.

dizel3d Over a year ago

@Briefkasten, I have updated my answer with $parse service. Think, it is what you want.

Briefkasten Over a year ago

Thanks for your example. That's exactly what I need. My current problem is that the $parse(boundExpression); expression throws an "TypeError: object is not a function". When I debug the $parse object is available. Do you got any hint? My modify example jsfiddle.net/dizel3d/h5Ls3dbv

dizel3d Over a year ago

@Briefkasten, seems you gave wrong URL to an example.

Briefkasten Over a year ago

Correct URL jsfiddle.net/28y2rps4 . When the user clicks on the template the setFocus function will be executed.

|

Collectives™ on Stack Overflow

extract binded angularjs data from html elements with angularjs directive

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related