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

问题描述：

我需要循环浏览JSON文件，并且我正在使用AngularJS。该函数如下：如何在JavaScript函数中包含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'内部功能\脚本标签。 – Chandermani

好了，这是固定的，但问题仍然存在 – Xeen

console.log有什么问题？ –

答

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

您可以创建简单的directive，它可以放在ng-repeat的内部。每当一个指令被循环实例化时，你可以用你需要的所有参数运行你的函数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>

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

相关推荐