0

Hi This question is very similar to the question posted here except that the solution doesnt work for me . i have a Json string like this

ctrl.myData = '{"name":"John","age":30,"cars":["Ford","BMW","Fiat"]}';

I need to assign this to my directive attribute so that my output looks like below 

<div my-directive data-attr= '{"name":"John","age":30,"cars":["Ford","BMW","Fiat"]}'> </div>

So when i give 

<div my-directive data-attr="{{ctrl.myData}}"> </div>

i get an error

[$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{ctrl.myData}}] starting at [{ctrl.myData}}].

based on the answer in the other thread, I remove the quotes and gave just 

<div my-directive data-attr="ctrl.myData"> </div>

but when i do this, it treats it as a string and prints ctrl.myData in output. i also tried with single quotes.

How do I attach a JSON object to the directive?

PS - it is not my directive. an Old existing and working one. So can't really change the directive.Any help would be gladly appreciated...

Night Monger
  • 770
  • 1
  • 10
  • 33
  • what about `data-attr="JSON.parse(ctrl.myData)"` ? – suvartheec Dec 16 '17 at 04:52
  • If you pass ctrl.myData to data-attr attribute and get ctrl.myData as output so the data-attr is a one-way binding attribute(with @). send the directive for more information. – Iman Bahrampour Dec 16 '17 at 05:35
  • To understand the problem, we need to see the code for the directive. It seems odd that the [$parse service](https://docs.angularjs.org/api/ng/service/$parse) would treat `ctrl.myData` as a string. – georgeawg Dec 16 '17 at 06:35

1 Answers1

2

You should read about directive scope types, in scope type we have = for passing variables, @ for passing strings, & for passing functions

This sample related to your question we use = to pass an json from our controller or you can pass it from your view.

data-attr='{"name":"John","age":30,"cars":["Ford","BMW","Fiat"]}'


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

app.controller('ctrl', function($scope, $http) {
  $scope.myData = {
    "name": "John",
    "age": 30,
    "cars": ["Ford", "BMW", "Fiat"]
  }

  $scope.call = function() {
    console.log("requested from controller")
  }
});

app.directive('myDirective', function() {
  return {
    scope: {
      attr: '=',
      string: '@',
      method: '&'
    },
    link: function(scope, elem, attr) {
      console.log(scope.attr);
      console.log(scope.string);
      scope.method();
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <h1>as json from controller</h1>
  <div my-directive data-attr="myData" data-string='hello World' data-method='call()'></div>
</div>
Maher
  • 2,517
  • 1
  • 19
  • 32
  • [AngularJS 1.5](https://github.com/angular/angular.js/blob/master/CHANGELOG.md#150-ennoblement-facilitation-2016-02-05) adds one-way `"<"` binding to isolate scope. [One-way binding](https://docs.angularjs.org/api/ng/service/$compile#-scope-) should be used for input attributes that bind Angular Expressions going forward. For more information, see [AngularJS Developer Guide - Component-based Application Architecture](https://docs.angularjs.org/guide/component#component-based-application-architecture). – georgeawg Dec 16 '17 at 06:24