如何在 JavaScript 函数中包含 AngularJS 变量

How to include AngularJS variable in JavaScript function?

本文关键字：包含 AngularJS 变量 函数 JavaScript      更新时间：2023-09-26

我需要遍历JSON文件，我正在使用AngularJS。函数如下：

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

通过使用以下代码{{task.name}}和描述仅打印为 {{task.name}}，如何使其打印出该变量的内容？如果我不使用引号，它不会显示任何内容。

我该如何解决这个问题？

我认为您需要检查您的代码设计。在ng-repeat内放置<script>标签的想法对我来说并不是最佳实践。

您可以创建可以放置在ng-repeat内的简单directive。每次循环实例化其中一个指令时，您都可以使用所需的所有参数new primitives.orgdiagram.ItemConfig()运行函数。

我已经创建了类似的东西，但我不是调用您的函数，而是在控制台上打印。

请查看下面的代码或此处的工作示例(http://plnkr.co/edit/1J2Ep6DbfUiFDkL6TUAv?p=preview(

 <!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>
相关文章：