将JSON对象作为属性传递给指令

Question

嗨这个问题非常类似于发布here的问题，除了解决方案对我不起作用。我有一个像这样的Json字符串

ctrl.myData ='{“name”：“John”，“age”：30，“cars”：[“Ford”，“BMW”，“Fiat”]}';

我需要将它分配给我的指令属性，以便我的输出如下所示

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

所以，当我给予

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

我收到一个错误

[$ parse：syntax]语法错误：从[{ctrl.myData}}开始的表达式[{{ctrl.myData}}]的第2列的令牌'{'无效键。

基于另一个帖子中的答案，我删除了引号并且只是给出了

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

但是当我这样做时，它将它视为一个字符串并在输出中输出ctrl.myData。我也试过单引号。

如何将JSON对象附加到指令？

PS - 这不是我的指示。一个旧的现有的和工作的。所以无法真正改变指令。任何帮助都会很高兴地欣赏...

Answer 1

你应该读一下directive范围类型，在范围类型中我们有=用于传递变量，@用于传递字符串，&用于传递函数

此示例与您的问题相关，我们使用=从控制器传递json，或者您可以从视图中传递它。

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>