如何在AngularJS函數中加載數據屬性？

我在玩使用JQuery和AngularJS的網站項目。 $http用於瀏覽器和服務器之間的REST通信。該網站的網址是localhost:8080/myproject。因此，每個頁面或資源都有一個路徑/myproject/someresource。爲了能夠容易地構建這些路徑我使用數據屬性的body元件上：如何在AngularJS函數中加載數據屬性？

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

的data-url的實際值通過JSP的<c:url value="/" />是動態生成的。現在我想使用此屬性爲$http方法構建一些路徑。爲此，我使用JQuery：

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

然而，我不得不等待DOM產生的結束，所以以前被包裹：

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

在另一方面，我有一個AngularJS $scope功能，用於按鈕：

<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 */ }); 
    }; 
}

爲了編譯角碼代碼，它可能不會被包裹在$函數中，如path的定義。因此，path將不會在控制器定義時設置。我發現的唯一的解決辦法是移動的foo()定義內$()和存儲$http在$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 */ }); 
    }; 
}

是否有此問題的任何清晰的解決方案？我的方法看起來像一個骯髒的黑客...

來源

2014-11-25 Bastian

難道你不能簡單地使用''標籤嗎？ – sp00m 2014-11-25 15:35:42

你能解釋爲什麼你需要在_data-url_中動態加載路徑嗎？如果沒有必要這樣加載它，你可以使用「plain」AngularJS進行靜態配置... – arman1991 2014-11-25 18:13:34

@ sp00m我可以使用這個標籤。但是這並不能解決AngularJS的控制器在完成DOM設置之前需要定義的主要問題，這個問題反過來需要在我可以通過JQuery查詢屬性之前完成。 – Bastian 2014-11-26 07:58:11

好的，對我很慚愧 - 我不知道爲什麼AngularJS和JQuery的執行順序存在問題，但它們似乎沒有了。當我寫這篇文章時，我認爲AngularJS的編譯是在JQuery加載之前執行的，這就是爲什麼我不能在我的控制器定義中使用JQuery的原因。也許我混合了一些東西...

但是，我剛剛檢查了Andy的回答，並看到他的解決方案將工作。然而。我可以跳過使用，他提出，只是把我所有的控制邏輯對進入控制器確定指標的全局變量 - 包括JQuery的呼叫：

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 */ }); 
    }; 
});

這是有道理的，這工作，因爲AngularJS內部已經用了jQuery (jqLite)。 ..

來源

2014-11-26 08:22:41 Bastian

您可以使用全局變量與angularjs

首先，設置可變

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

最後

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 */ }); 
    }; 
}

乾杯！

來源

2014-11-25 15:11:48

你的解決方案能夠工作，但是它並沒有解決原始問題 - 請參閱我的答案瞭解詳細信息 – Bastian 2014-11-26 08:22:37

您可以使用$routeProvider來配置路由，並使用constants來保存您的URL，然後將其注入到模塊中。

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... 
    });

這是配置可以在應用程序的任何部分注入的示例。在這種方式下，你可以爲每個路徑管理你的頁面的URL和哪個控制器將用於該路徑...

也許這個解決方案可以幫助你。

來源

2014-11-26 20:34:33 arman1991

如何在AngularJS函數中加載數據屬性？

回答

相關問題