Question

以下实例有效，但实际上是变化无常的

＆＃13;

angular.module('app', ['components']);
angular.module('components', [])
.directive("hbHero", function(){
    return {
        scope: {
          param: '='
        },
        restrict: 'E',
        template: '<h1>{{param.h1}}</h1><h2>{{param.h2}}</h2><h3>{{param.h3}}</h3>'
    };
  });

＆＃13;

<!DOCTYPE html>
<html ng-app="app">
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.0/angular.min.js"></script>
  </head>
  <body>
    <hb-Hero param={h1:'Message1',h2:'Message2',h3:'Message3'}></hb-Hero>
  </body>
</html>

＆＃13;

第二个我向HTML添加空格（如下所示）并重新运行我在控制台中收到解析错误。

<hb-Hero param={h1:'Message 1',h2:'Message 2',h3:'Message 3'}></hb-Hero>

哪些更好的选项可以让我传递和访问属性中的JSON对象并将其显示在指令的模板中？

Answer 1

万一有人遇到类似的问题。

在修补它之后，它似乎是一个语法问题。在添加双引号后，如下所示，该示例使用了空格，而不修改任何javascript代码。

<hb-Hero param="{h1:'Message 1',h2:'Message 2',h3:'Message 3'}"></hb-Hero>

我仍然对更好的方法感兴趣，虽然这似乎可以完成工作。

如何传递JSON属性并在Angular指令的模板中显示它

1 个答案: