Question

我将使用名为Plotly的图表库。我正在创建一个指令，所以我可以使用带有angularJS的库，并在将来重用，如果需要的话。

我想向指令传递一个将用于创建图形的对象。通过调用加载此对象。这是代码：

控制器：

angular.module("app").controller("appDetailsController", 
    ['$scope', '$http', function($scope, $http) {


  $scope.graphData = {}


  $http.get('/api/analytics/24').then(function(data) {
    console.log('Loaded analytics data:', data);
    $scope.graphData = data.data
  })

}])

指令：

angular.module("app").directive("timelineGraph", function() {
    return {
        restrict: "E",
        scope: {
            data: "="
        },
        link: function(scope, element, attr) {
            console.log("scope data:", scope, scope.data)
        }
    }
})

HTML：

<timeline-graph data="graphData"></timeline-graph>

在链接函数内的“范围”中，我可以看到数据对象在那里，但它只在调用之后填充。所以我发现这可行，但确实如此：

scope.$watch('data', function(data) {
   if(data)
     console.log('data changed:', data)
})

但是我想知道除了将我的所有代码都放在监视处理程序中之外，是否有更好的方法来处理这个问题。

Answer 1

您不必将所有代码放入监视功能：

// in your directive
scope.$watch('data', function(data) {
  if (data) {
    dataChanged();
  }
});

您只需要调用一个函数来启动更新指令所需的代码

// also in your directive
function dataChanged() {
  // do graphing code
}

除此之外，您似乎走在了正确的轨道上。

Answer 2

经过一些研究，您的代码可以正常工作（请参阅下面的代码示例）。 UI在数据更改时更新，因此没有问题。正如@JoelCDoyle推荐的那样，只需将代码放在一个单独的函数中并在$ watch中调用它。

＆＃13;

angular.module("app", [])
.controller("appDetailsController", 
    ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {

  $scope.graphData = [];

  $scope.init = function(){
    $http.get('https://jsonplaceholder.typicode.com/users')
    .then(function(resp) {
      $scope.graphData = resp.data;
    })
  }  
}])
.directive("timelineGraph", function() {
    return {
        restrict: "E",
        scope: {
            data: "="
        },
        template: '<div>"{{data}}"</div>',
        link: function(scope, element, attr) {
            console.log("scope data:", scope.data)
        }
    }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="appDetailsController" ng-init="init()">
    <timeline-graph data-data="graphData">  </timeline-graph>
  </div>
</div>

＆＃13;

AngularJS：在指令链接函数中访问json响应

2 个答案: