如何避免使用 ng-repeat 在 HTML 中硬编码 url 名称

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 中对 url http://192.128.1.125/uploads/images/ 进行硬编码，因为每次 url 更改时我都需要更改？

Answer 1

我的第一个想法：相对简单的解决方案。为您的 url 配置。然后你只需将配置注入你的controller/link。这可以通过提供... 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"
    });
}]);
})();

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

Answer 2

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

Answer 3

创建一个服务于 urls 的简单服务，因此如果您需要更改 url，您需要做的就是更改此服务。

例如：

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

在控制器中，

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 4

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

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

然后在任何地方你都可以注入 siteSettings 并像 siteSettings.host

一样使用它

如何避免使用 ng-repeat 在 HTML 中硬编码 url 名称

How to avoid hard-coding url names in HTML with ng-repeat

javascript

angularjs

angularjs-ng-repeat