Question

您好！

我有一个问题，关于使用ng-repeat进行自定义指令的能力，该指令用于使用D3.js绘制图表。

如果我有通过按钮触发的函数初始化的变量，有没有办法将所述变量与ng-repeat一起使用？

代码示例：

var app = angular.module('app', []);
app.controller('controller'function app($scope) {
    $scope.getData = function () {
        //get something via a http request using selected_id;
        return return_val;
    };
    app.directive('chart', function () {
        //directive code here,
    });
};

<body>
    <form ng-submit="getData()">
        <input type="checkbox" name="checkbox" ng-model="selected_id">checkbox</input>
        <button type="submit">Submit</button>
    </form>
    <chart ng-repeat="item in return_val" ng-if="return_val" val="return_val[$index]"></chart>
</body>

有没有办法让图表标记在运行getData函数时初始化，以便在绘图时使用 return_val [$ index] 的值？在这个例子中，当getData（）改变它时，我希望在return_val中为每个元素得到一个图。

我如何更改代码才能使其正常工作？

Answer 1

请参阅https://docs.angularjs.org/api/ng/service/$http

您可以使用$ http请求返回.success函数的承诺设置范围变量。

var app = angular.module('app', []);
app.controller('controller'function app($scope, $http) {
  $scope.getData = function () {
    $http.get('something').success(function(result) {
      $scope.results = result.values;
    });
  }
});

<body>
  <form ng-submit="getData()">
    <input type="checkbox" name="checkbox" ng-model="selected_id">
    <button type="submit">Submit</button>
  </form>
  <chart ng-repeat="item in results" ng-if="results" val="item"></chart>
</body>

Answer 2

首先，你想要实现什么目标。

第二，你的指令永远不应该在你的控制器内。指令存在的主要原因是SOC。

您的脚本可能如下所示：

＆＃13;

var app = angular.module('app', []);
app.controller('ctrl', function app($scope) {
    $scope.getData = function () {
        return_val = [{ id: 'A', value: 10 }, { id: 'B', value: 12 }];
        $scope.return_val = return_val;
    };
});
 app.directive('chart', function () {
        return {
          template: '<h5>{{item.id}} : {{item.value}}</h5>',
          restrict: 'AE',
          replace: true,
          scope: false
        }
  });

＆＃13;

<html ng-app='app'>

<head>
  <script src='https://code.angularjs.org/1.3.15/angular.js'></script>
  <script src='script.js'></script>
</head>

<body ng-controller='ctrl'>
  <form ng-submit="getData()">
    <input type="checkbox" name="checkbox" ng-model="selected_id" /> checkbox
    <button type="submit">Submit</button>
  </form>
  <chart ng-repeat="item in return_val" ng-if="return_val" val="return_val[$index]"></chart>
</body>

</html>

＆＃13;

Angular指令在函数后重复

2 个答案: