How to load data attributes in AngularJS functions?

Question

How to load data attributes in AngularJS functions?

1.5k Views Asked by Bastian At 04 April 2025 at 15:51

I am playing with a website project that uses both JQuery and AngularJS. $http is used for the REST communication between the browser and the server. The website's URL is localhost:8080/myproject. Therefore, every page or resource has a path /myproject/someresource. In order to be able to easily construct these paths I use a data property on the bodyelement:

<!DOCTYPE html>
<html>
...
<body data-url="myproject">
</body>

The actual value of data-url is dynamically generated via JSP's <c:url value="/" />. Now I want to use this attribute to build some paths for the $http method. To this end, I use JQuery:

var path = $('body').attr('data-url');

However, I have to wait for the end of the DOM generation, so the previous gets wrapped:

var path;
$(function() {
    path = $('body').attr('data-url');
}

On the other hand, I have a AngularJS $scope function which is used for a button:

<button ng-click="foo()">click</button>

...

var mainApp = angular.module('main', [ 'ngResource' ]);
mainApp.controller('myController', function($scope, $http) {
  $scope.foo = function() {
    $http.get(path + 'folder').success(function(response) { /* do crazy stuff */ });
  };
}

In order to make the compilation of the angular code work it may not be wrapped inside the $ function like the definition of path. Thus, path will not be set at the definition time of the controller. The only solution that I found was to move the definition of foo() inside $() and store $http in the $scope:

mainApp.controller('myController', function($scope, $http) {
  $scope.$http = $http;
}
$(function() {
    var path = $('body').attr('data-url');
    var $scope = angular.element($('main')).scope();
    var $http = $scope.$http;

    $scope.foo = function() {
      $http.get(path + 'folder').success(function(response) { /* do crazy stuff */ });
    };
}

Is there any clean solution for this problem? My way looks like a dirty hack...

Original Q&A

There are 3 best solutions below

Andy Ecca On 25 November 2014 at 15:11

You can use global variable with angularjs

First off, setup variable

app.run(function ($rootScope) {
    $rootScope.path = $('body').attr('data-url');
});

Finally

var mainApp = angular.module('main', [ 'ngResource' ]);
mainApp.controller('myController', function($scope, $http) {
  var path = $scope.path;
  $scope.foo = function() {
    $http.get(path + 'folder').success(function(response) { /* do crazy stuff */ });
  };
}

Cheers!

arman1991 On 26 November 2014 at 20:34

You can use $routeProvider for configuring the routes and constants to save your URL and then inject it in module.

angular
    .module('app', ['ngRoute'])
    .constant("myConfig", {
        "url": "http://localhost",
        "port": "8080"
    })
    .config(function ($routeProvider) {
        $routeProvider
            .when('/somesource', { 
                templateUrl: 'views/page.html',
                controller: 'myController'
            })
            .when('/somesource2', { 
                templateUrl: 'views/page2.html',
                controller: 'myController2'
            })
            .otherwise({
                redirectTo: '/'
            });
    })
    .controller('myController', function (myConfig) {
        // Your functions...
    });

This is example where config could be injectable at any part of your application. On this way you can for every path manage the url of your page and which controller will be used for that path...

Maybe this solution can be helpful for you.

**Bastian** · Accepted Answer

Ok, shame on me - I do not know why there ever were problems with the order of execution of AngularJS and JQuery but they seem to be gone. When I wrote this post I thought that AngularJS' compilation was executed before JQuery was loaded which was why I could not make use of JQuery at the definition of my controllers. Maybe I mixed something up...

However, I just checked Andy's answer and saw that his solution would work. Nevertheless. I can skip the use of global variables that he proposed and just put all my controller logic right into the controller defintion - including the JQuery call:

var mainApp = angular.module('main', [ 'ngResource' ]);
mainApp.controller('myController', function($scope, $http) {
  $scope.foo = function() {
    var path = $('body').attr('data-url');
    $http.get(path + 'folder').success(function(response) { /* do crazy stuff */ });
  };
});

It makes sense that this works since AngularJS internally already uses JQuery (jqLite)...

How to load data attributes in AngularJS functions?

There are 3 best solutions below

Related Questions in JQUERY

Related Questions in ANGULARJS

Related Questions in URL

Related Questions in CUSTOM-DATA-ATTRIBUTE

Trending Questions

Popular # Hahtags

Popular Questions