How to retrieve scope variable within the <script> element

Question

How to retrieve scope variable within the <script> element

I have a question about using angularjs.

Here is the structure of my HTML:

<html>
    <body ng-controller="datafileController">
        <div class="container">
            <center><h1>Datafiles</h1></center>
            <div class="row" ng-repeat="i in datafile.items">
                <div class="col-sm-8">
                    <p>Total MB: {{i.total_mb}}</p>
                    <p>Used MB: {{i.used_mb}}</p>
                    <p>Free MB: {{i.free_mb}}</p>
                    <br>
                    <br>
                </div>
                <div class="col-sm-4">
                    <div id="myDiv"></div>
                    <script>
                        var data = [{
                            values: [{{i.used_mb}}, {{i.free_mb}}],
                        labels: ['Free MB', 'Used MB'],
                            type: 'pie'
                        }];
                        Plotly.newPlot('myDiv', data);
                    </script>
                </div>
            </div>
        </div>
    </body>
</html>

And this is how my controller looks like:

aebdApp.controller('datafileController', function($scope, $http) {
    $http.get('http://127.0.0.1:8083/json/datafiles.json').
     then(function(response) {
        $scope.datafile = response.data;
    }); 
});

Can someone guide me on how to access the i variable in the data section? I want to create a graph using Plotly for each item. Thank you.

javascript angularjs plotly

Answer 1

Answer №1

This is the method I employ to achieve this:

<html>
<body ng-controller="datafileController">
<div class="container">
    <center><h1>Datafiles</h1></center>
    <div class="row" ng-repeat="i in datafile.items">
        <div class="col-sm-8">
            <p>Total MB: {{i.total_mb}}</p>
            <p>Used MB: {{i.used_mb}}</p>
            <p>Free MB: {{i.free_mb}}</p>
            <br>
            <br>
        </div>
        <div class="col-sm-4">
            <div id="myDiv_{{$index}}"></div>
        </div>
    </div>
</div>

<script>
    aebdApp.controller('datafileController', function ($scope, $http, $timeout) {
        $http.get('http://127.0.0.1:8083/json/datafiles.json').then(function (response) {
            $scope.datafile = response.data;

            $timeout(function () {
                $scope.datafile.forEach(function (i, index) {
                    var data = [{
                        values: [i.used_mb, i.free_mb],
                        labels: ['Free MB', 'Used MB'],
                        type: 'pie'
                    }];

                    Plotly.newPlot('myDiv_' + index, data);
                });
            }, 1000);
        });
    });
</script>
</body>
</html>

Essentially, utilizing the innate $index variable and integrating the $timeout function. The necessity of the $timeout function remains uncertain.

Answer 2

This is the method I employ to achieve this:

<html>
<body ng-controller="datafileController">
<div class="container">
    <center><h1>Datafiles</h1></center>
    <div class="row" ng-repeat="i in datafile.items">
        <div class="col-sm-8">
            <p>Total MB: {{i.total_mb}}</p>
            <p>Used MB: {{i.used_mb}}</p>
            <p>Free MB: {{i.free_mb}}</p>
            <br>
            <br>
        </div>
        <div class="col-sm-4">
            <div id="myDiv_{{$index}}"></div>
        </div>
    </div>
</div>

<script>
    aebdApp.controller('datafileController', function ($scope, $http, $timeout) {
        $http.get('http://127.0.0.1:8083/json/datafiles.json').then(function (response) {
            $scope.datafile = response.data;

            $timeout(function () {
                $scope.datafile.forEach(function (i, index) {
                    var data = [{
                        values: [i.used_mb, i.free_mb],
                        labels: ['Free MB', 'Used MB'],
                        type: 'pie'
                    }];

                    Plotly.newPlot('myDiv_' + index, data);
                });
            }, 1000);
        });
    });
</script>
</body>
</html>

Essentially, utilizing the innate $index variable and integrating the $timeout function. The necessity of the $timeout function remains uncertain.

Answer 3

Answer №2

Avoid placing code that manipulates the DOM within controllers. Instead, consider creating a specialized directive:

app.directive("plotly", function() {
    return {
        link: postLink
    };
    function postLink(scope,elem,attrs) {
        scope.$watch(attrs.plotly, function(i) {
            if (i) {
                 var data = [{
                     values: [{{i.used_mb}}, {{i.free_mb}}],
                     labels: ['Free MB', 'Used MB'],
                     type: 'pie'
                 }];
                 Plotly.newPlot(elem[0], data)
            };
        });
    }
}

HOW TO USE:

<div class="row" ng-repeat="i in datafile.items">
    <div class="col-sm-8">
        <p>Total MB: {{i.total_mb}}</p>
        <p>Used MB: {{i.used_mb}}</p>
        <p>Free MB: {{i.free_mb}}</p>
        <br>
        <br>
    </div>
    <div class="col-sm-4">
        <div id="myDiv{{$index}}" plotly="i"></div>
    </div>
</div>

Answer 4

Avoid placing code that manipulates the DOM within controllers. Instead, consider creating a specialized directive:

app.directive("plotly", function() {
    return {
        link: postLink
    };
    function postLink(scope,elem,attrs) {
        scope.$watch(attrs.plotly, function(i) {
            if (i) {
                 var data = [{
                     values: [{{i.used_mb}}, {{i.free_mb}}],
                     labels: ['Free MB', 'Used MB'],
                     type: 'pie'
                 }];
                 Plotly.newPlot(elem[0], data)
            };
        });
    }
}

HOW TO USE:

<div class="row" ng-repeat="i in datafile.items">
    <div class="col-sm-8">
        <p>Total MB: {{i.total_mb}}</p>
        <p>Used MB: {{i.used_mb}}</p>
        <p>Free MB: {{i.free_mb}}</p>
        <br>
        <br>
    </div>
    <div class="col-sm-4">
        <div id="myDiv{{$index}}" plotly="i"></div>
    </div>
</div>

How to retrieve scope variable within the <script> element

Answer №1

Answer №2

HOW TO USE:

Similar questions

Aggregate the values in an array and organize them into an object based on their frequency

Conflicts in routing between Node.js and AngularJS

Update a single javascript variable on every rotation of the Bootstrap carousel

When JSON contains slashes, JSON.parse will trigger an error

Transforming an older React website with react-helmet-async

Attempting to retrieve key-value pairs from a nested JSON array

Can you explain the purpose and functionality of the 'next' parameter within a middleware function in the Node.js Express framework?

Passport JS allows you to create a secure login form that redirects users to different URIs based on their role

Navigating through objects within arrays within objects in Angular

Vue component fails to render due to a simple issue

Making sure the checkbox stays selected in an angular environment

Utilize Page.evaluate() to send multiple arguments

Adding an additional parameter in the ListItem onMouseOver function

At times, an InvalidArgumentError occurs stating: "The 'handle' parameter must be a string."

Retrieving a variable in a JavaScript function while a webpage is in the process of loading

Can a variable declared in wdio.conf be accessed?

Removing information from a MongoDB database with the help of AngularJS and Node.js

What does the underscore before a function in JavaScript or PHP signify?

Events in the cell header of Angular ui-grid are not triggering as expected

Automatically update div content using jQuery including an AJAX request for loading