Question

在解释问题之前，我想先提一下我的HTML代码

<div ng-repeat="item in employeeNames">
<span>
 <img data-ng-src="http://192.128.1.125/uploads/images/{{item.photoName}}">     
</span>
{{item.name}} 
</div>

其中employeeNames包含name和photoName的对象数组。

$sope.employeeNames=
    [{
       name:Rob,
       photoName:rer343983j38u38r8u3
     },
     {
      name:Alice,
     photoName:dfgrt564yt546y565556r4t
    },
]

如何避免在html中对网址http://192.128.1.125/uploads/images/进行硬编码，因为每次网址更改时我都需要更改？

Answer 1

创建一个为urls提供服务的简单服务，因此，如果您需要更改网址，则需要更改此服务。

例如：

var app = angular.module('app', []);

app.factory('URLs', function() {

    var domain = 'http://192.128.1.125/';

    return {
        uploadPath: {
            url: domain+'uploads/images/'
        },

        appImagesPath: {
            url: domain+'uploads/images/app/'
        },

        // for $httpa jax requests,

        getUserDetails: {
            url: domain+'user/details',
            method: 'GET'
        },

        postLoginDetails: {
            url: domain+'user/login',
            method: 'POST'
        }
    }
});

在Controller中，

app.controller('testCtrl', ['$scope', '$http', 'URLs', function($scope, $http, URLs) {

    $scope.uploadDir = URLs.uploadPath;

    /*
     *--------------------------------------------
     * if you need to process `$http` ajax request.
     *--------------------------------------------
     */
      var httpConfig = {
              method: URLs.getUserDetails.method, 
              url: URLs.getUserDetails.url, 
              data: {}
       };

    // OR 

    /*
     * var httpConfig = URLs.getUserDetails;
     * 
     * httpConfig['data'] = {pram1: 'data-value-1', param2: 'data-value-2'};
     */
      $http(httpConfig).
          .success(function(data, status, headers, config) {

          }). error(function(data, status, headers, config) {

          });
}]);

HTML中的

，

<img data-ng-src="{{uploadDir+item.photoName}}">

Answer 2

我个人使用服务来提供所有配置

angular.module('myApp').service('siteSettings', function(){
  return {
    host: 'http://localhost:5000',
    userApi: '/users'
  }
})

然后在任何地方你可以注入siteSettings并像siteSettings.host一样使用

Answer 3

我的第一个想法：相对简单的解决方案。为您的网址配置。然后，您只需在控制器/链接中注入配置。这可以通过提供... https://docs.angularjs.org/api/auto/service/$provide

来完成

示例：

(function () {
angular.module("myApp", [])
.config(["$provide",
function ($provide) {
    $provide.value("siteConfig", {
        imgAssetServerUrl: "http://127.0.0.1/img"
    });
}]);
})();

我的第二个想法：使用相对网址。

Answer 4

您可以使用Angular的$location服务，并使用$location.host()等给定函数构建链接。

如何避免使用ng-repeat在HTML中对网址名称进行硬编码

4 个答案: