将JSON对象作为属性传递给指令
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了将JSON对象作为属性传递给指令相关的知识，希望对你有一定的参考价值。
嗨这个问题非常类似于发布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 - 这不是我的指示。一个旧的现有的和工作的。所以无法真正改变指令。任何帮助都会很高兴地欣赏...
答案
你应该读一下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>以上是关于将JSON对象作为属性传递给指令的主要内容，如果未能解决你的问题，请参考以下文章