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

22 浏览
0 Comments

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

这个问题与这里发布的问题非常相似，但是解决方案对我不适用。

我有一个像这样的Json字符串

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

我需要将其分配给我的指令属性，使得我的输出如下所示：





所以当我给出








我得到一个错误




[$parse:syntax] 语法错误：Token '{' 无效键位于表达式[{{ctrl.myData}}]的第2列开始处[{{ctrl.myData}}]。




根据其他帖子中的答案，我删除了引号并只提供了








但是当我这样做时，它将其视为字符串并在输出中打印ctrl.myData。


我也尝试了单引号。


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


PS - 这不是我的指令。一个旧的现有工作的指令。所以不能真正改变指令。非常感谢任何帮助...

															

							

															

						

						
0

					

				


			


			
			

	

		

			

				1
				答案			


					


		
		

			
				
											


	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
问题的原因是：在AngularJS 1.5之前的版本中，通过指令将JSON对象作为属性传递给指令的方式是使用"="来绑定变量。然而，这种方式需要在指令的作用域中使用双向绑定，这可能会引起一些问题。


解决方法是：在AngularJS 1.5之后的版本中，可以使用"<"来实现单向绑定，这样可以避免一些潜在的问题。在上面的代码示例中，可以将指令的作用域中的"="改为"<"，如下所示：




app.directive('myDirective', function() {
  return {
    scope: {
      attr: '<',
      string: '@',
      method: '&'
    },
    link: function(scope, elem, attr) {
      console.log(scope.attr);
      console.log(scope.string);
      scope.method();
    }
  }
});





这样做的好处是，可以确保指令的作用域中的属性只能单向地从父作用域传递给子作用域，避免了可能出现的双向绑定问题。


参考链接：


- [AngularJS 1.5 CHANGELOG](https://github.com/angular/angular.js/blob/master/CHANGELOG.md#150-ennoblement-facilitation-2016-02-05)


- [AngularJS $compile Service - Scope](https://docs.angularjs.org/api/ng/service/%24compile#-scope-)


- [AngularJS Developer Guide - Component-based Application Architecture](https://docs.angularjs.org/guide/component#component-based-application-architecture)

									

				

									

			

			
0