AngularJS: Zugriff json Antwort in Link-Funktion innerhalb der Direktive

Question

Ich werde eine Diagrammbibliothek namens Plotly verwenden. Ich erstelle eine Anweisung, damit ich die Bibliothek mit angularJS verwenden und bei Bedarf in Zukunft wiederverwenden kann.

Ich möchte ein Objekt an die Direktive übergeben, das zum Erstellen des Graphen verwendet wird. Diese Objekte werden über einen Aufruf geladen. Hier ist der Code:

REGLER:

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

}]) 

RICHTLINIE:

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> 

In "scope" in der Link-Funktion kann ich sehen, dass das Datenobjekt ist da, aber es ist nur gefüllt, nachdem der Anruf getätigt wurde. So habe ich herausgefunden das funktionieren würde und es tut:

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

Aber ich würde gerne wissen, ob es ein besserer Weg, diese andere Handhabung als habe meinen gesamten Code in dem Uhr-Handler.

Answer 1

Sie müssen nicht alle des Codes in die Uhr Funktion setzen:

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

Sie benötigen nur eine Funktion aufzurufen, den Code der Richtlinie

aktualisieren müssen, kick off

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

Ansonsten scheint es, als ob Sie auf dem richtigen Weg sind.

Answer 2

Nach einiger Forschung funktioniert Ihr Code (siehe unten das Codebeispiel). Die Benutzeroberfläche wird aktualisiert, wenn sich die Daten ändern, sodass keine Probleme auftreten. Wie @JoelCDoyle empfohlen, fügen Sie einfach Ihren Code in eine separate Funktion ein und rufen Sie ihn in der $ watch auf.

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

<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>