Calling a jQuery function on an HTML element returned from AngularJS's ng-view directive

Question

I am using angularJS and the $route service to load a partial view file like so.

<ng-view onload="onViewLoad()">
</ng-view>

works fine.

My Problem is trying to call a jQuery function on an html element that is returned specifically trying to call the jQuery bigtext() function on a header class from the partial file. I have tried

        $scope.onViewLoad = function(data){
            $(.bigTitle).bigtext({
                maxfontsize: 40 // default is 528 (in px)
            };
        });

and many similar things, but my problem is that I can not figure out how to select an element by class or id from the partial view. Can anyone tell me or lead me in the right direction to what the reason I can not access elements from the partial view. If a more robust sample of any of the code will help let me know. thanks

charlietfl · Accepted Answer · 2015-08-05 01:12:23Z

1

Anything like this needs to be done in a directive. This assures you the element exists when code fires and is simple to call the plugin directly on the element ... no need to worry about classes or ID's

HTML

<h3 big-text>My Header</h3>

Directive

angular.module('myApp').directive('bigText', function () {
    return {
        restrict: 'A', // "A" for attribute
        link: function (scope, elem, attrs) {
            // elem is jQ object
            elem.bigtext({
                maxfontsize: 40 // default is 528 (in px)
            });
        }
    }
});

Note that elem is a jQuery object inside link when jQuery.js is included in page before angular.js loads, otherwise it is a jQlite object with many (but not all) jQuery methods included

answered Aug 5, 2015 at 1:12

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

1 Comment

Four_lo Over a year ago

<h3 big-text>My Header</h3> how does the big-text in this h3 tag if you don't mind?

Collectives™ on Stack Overflow

Calling a jQuery function on an HTML element returned from AngularJS's ng-view directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related