0

所以我正在用 AngularJS 构建一个应用程序。

我从 JSON 获取数据。JSON 来自具有标签、x 坐标、y 坐标和宽度/高度的数据。

controller.js我在我的文件中使用以下代码执行此操作：

function locationController( $scope, $http, getCss) {
    $http.get('file.json').success(function(data) {
        $scope.locations = data;
    });
}

我在我的 HTML 中输出它，如下所示：

<section ng-controller="locationController">
    <ul>
        <div ng-repeat="location in locations" ng-style="location.css()" >
            <p>{{location.label}}</p>
        </div>
    </ul>
</section>

现在我想做一个服务，为我重复的 div 生成 CSS。它基于我从 JSON 获得的位置的宽度/高度 x en y 坐标。

这是代码：

var app = angular.module('myApp', []);
app.factory('getCss', function() {
  return {
    css : function(x , y , value) {
      return {
                backgroundColor: "#333",
                x: (x - value) + 'px',
                y: (y - value) + 'px',
                width: (value * 2) + 'px',
                height: (value * 2) + 'px',
                color: "#FFF"
             }
    }
  }
});

但是如何将此服务链接到每个位置？

4

1 回答 1

1

getCss在控制器上公开服务，如下所示：

function locationController( $scope, $http, getCss) {
  $http.get('file.json').success(function(data) {
   $scope.locations = data;
 });
  $scope.css = function(location) {
   return getCss.css(location.x, location.y, location.value);
  }
}

在 HTML 上：

<div ng-repeat="location in locations" ng-style="css(location)" >
    <p>{{location.label}}</p>
</div>
于 2013-01-21T17:06:11.307 回答