Pass a JSON Object as attribute to directive - angularjs

Question

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

Answer 1

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>