Question

您好这个问题与发布here的问题非常相似，只是解决方案对我不起作用。我有一个像这样的Json字符串

ctrl.myData =＆＃39; {＆＃34; name＆＃34;：＆＃34; John＆＃34;，＆＃34; age＆＃34;：30，＆＃34; cars＆＃34;： [＆＃34;福特＆＃34;＆＃34; BMW＆＃34;＆＃34;菲亚特＆＃34;]}＆＃39 ;;

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

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

所以当我给出

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

我收到错误

[$ parse：syntax]语法错误：令牌＆＃39; {＆＃39;第2列的无效密钥表达式[{{ctrl.myData}}]从[{ctrl.myData}}开始。

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

<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"]}'

＆＃13;

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();
    }
  }
});

＆＃13;

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

＆＃13;

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

1 个答案: