How to include AngularJS variable in JavaScript function? -
i have need loop through json file , i'm using angularjs that. function follows:
<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>
by using following code {{task.name}}
, description being printed {{task.name}}, how can make print out content of variable? , if i'm not using quotes, doesn't show anything.
how can fix that?
i think need review code design. idea of having <script>
tag inside ng-repeat
doesn't best practice me.
you create simple directive
placed inside ng-repeat
. every time 1 of directives instantiated loop run function new primitives.orgdiagram.itemconfig()
parameters need.
i've created similar instead of calling function, printing on console.
please take @ code below or working example here (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>
Comments
Post a Comment