Ways to incorporate AngularJS variable within a JavaScript function

Question

Ways to incorporate AngularJS variable within a JavaScript function

My current task involves iterating through a JSON file using AngularJS. Below is the function that I am working with:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script>
        function PostsCtrlAjax($scope, $http) {
        $http({method: 'POST', url: 'posts.json'}).success(function(data) {
                $scope.tasks = data;
            });
        }
</script>
<div id="ng-app" ng-app ng-controller="PostsCtrlAjax"> 
        <div ng-repeat="task in tasks.objects">
<script type="text/javascript">     
var adviser1 = new primitives.orgdiagram.ItemConfig("{{task.name}}", "{{task.description}}", "http://www.basicprimitives.com/demo/images/photos/z.png");
</script>
</div>
</div>

When using {{task.name}}, the output shows up as {{task.name}}, rather than the actual content of the variable. How can I make it display the variable's value? Also, when I remove the quotes, nothing is displayed. Any suggestions on how to rectify this?

Would appreciate some guidance on resolving this issue.

javascript function angularjs

Answer 1

Answer №1

Consider revisiting your code structure. Placing a <script> tag inside an ng-repeat may not be the best practice.

You could improve this by creating a simple directive to use within the ng-repeat. Each time the directive is instantiated in the loop, you can execute your function

new primitives.orgdiagram.ItemConfig()

with all necessary parameters.

I've implemented something similar, where instead of calling your function, I am outputting to the console.

Please review the code snippet below or view a working example here

 <!doctype html>
  <html lang="en" ng-app="myApp">
  <head>
   <meta charset="UTF-8">
    <title>Document</title>
     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
     <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>

      <script>

       var myApp = angular.module('myApp', []);

       myApp.controller('PostsCtrlAjax', ['$scope', '$http' ,function ($scope, $http) {

       $scope.tasks = {
        "data" :  [ 
         {
          name: 'Task 01',
          description: 'Task 01 Description',
          url: 'http://www.basicprimitives.com/demo/images/photos/z.png'
         },
        {
          name: 'Task 02',
          description: 'Task 02 Description',
          url: 'http://www.basicprimitives.com/demo/images/photos/z.png'
        }
      ]
    };
  }]);


  myApp.directive('adviser', [ '$compile', function ($compile) {
    return {
     restrict: 'A',
     transclude: true,
     replace: true,
      scope: {
       item : "="
      },
     link: function (scope, element, iAttrs) {

         var template = '<button ng-click="createAdviser(item.name, item.description, item.url)">{{item.name}}</button>';


         scope.createAdviser = function(name, description, url) {

         // var adviser1 =  new primitives.orgdiagram.ItemConfig(name, description, url);

            var adviser =  [name, description, url];

            console.log(adviser)

         }

         element.html(template).show();

         $compile(element.contents())(scope);

       }
     };
   }])

  </script>

  </head>
 <body>


 <div ng-controller="PostsCtrlAjax"> 
   <div ng-repeat="task in tasks.data">
     <div adviser item="task"></div>
  </div>
 </div>

 </body>
 </html>

Answer 2

Consider revisiting your code structure. Placing a <script> tag inside an ng-repeat may not be the best practice.

You could improve this by creating a simple directive to use within the ng-repeat. Each time the directive is instantiated in the loop, you can execute your function

new primitives.orgdiagram.ItemConfig()

with all necessary parameters.

I've implemented something similar, where instead of calling your function, I am outputting to the console.

Please review the code snippet below or view a working example here

 <!doctype html>
  <html lang="en" ng-app="myApp">
  <head>
   <meta charset="UTF-8">
    <title>Document</title>
     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
     <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>

      <script>

       var myApp = angular.module('myApp', []);

       myApp.controller('PostsCtrlAjax', ['$scope', '$http' ,function ($scope, $http) {

       $scope.tasks = {
        "data" :  [ 
         {
          name: 'Task 01',
          description: 'Task 01 Description',
          url: 'http://www.basicprimitives.com/demo/images/photos/z.png'
         },
        {
          name: 'Task 02',
          description: 'Task 02 Description',
          url: 'http://www.basicprimitives.com/demo/images/photos/z.png'
        }
      ]
    };
  }]);


  myApp.directive('adviser', [ '$compile', function ($compile) {
    return {
     restrict: 'A',
     transclude: true,
     replace: true,
      scope: {
       item : "="
      },
     link: function (scope, element, iAttrs) {

         var template = '<button ng-click="createAdviser(item.name, item.description, item.url)">{{item.name}}</button>';


         scope.createAdviser = function(name, description, url) {

         // var adviser1 =  new primitives.orgdiagram.ItemConfig(name, description, url);

            var adviser =  [name, description, url];

            console.log(adviser)

         }

         element.html(template).show();

         $compile(element.contents())(scope);

       }
     };
   }])

  </script>

  </head>
 <body>


 <div ng-controller="PostsCtrlAjax"> 
   <div ng-repeat="task in tasks.data">
     <div adviser item="task"></div>
  </div>
 </div>

 </body>
 </html>

Ways to incorporate AngularJS variable within a JavaScript function

Answer №1

Similar questions

Add one string to an existing array

Convert to a TypeScript map

The JADE form submission is not being captured even though the route is present

Is it possible to set up a local version of the Firebase database for development testing?

Unable to display the content

Performing a Node.js PUT call with specified parameters

Arrange items in an array by two criteria

Delivering the static index.html file using Django

Retrieve data from AJAX request using array index

Resolve React Issue: Using Functions as React Children is Invalid

Struggling to store information in a MongoDB database within my MEAN Stack project

String Replacement in JavaScript

Managing sessions in MEAN stack applications

employing a directive to call upon a controller function triggering a straightforward alert display

Error: npm encountered a socket timeout issue

Minimize an array by organizing objects based on the proximity of their numbers

A guide on displaying names individually in AngularJS

Filtering an array can be done by selecting a specific item and applying the

The evaluation of nested directives in AngularJS is not functioning as expected

What is the best way to limit the input field to only allow up to 100 characters