如何以一种方式绑定指令angularjs传递json对象

时间:2016-09-01 15:49:37

标签: angularjs

我需要将对象传递给angularjs指令但我不能使用&或=用于绑定。我尝试使用|将字符串转换为对象json过滤并创建临时变量。仍然转换不起作用我如何继续。提前致谢

1 个答案:

答案 0 :(得分:2)

要使用@传递一个对象,你必须使用{{}}(小胡子),并且在指令方面,它确实将它作为一个对象,你可以像这样使用它:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script >
      var app = angular.module('yourApp', []);
      app.controller('FooCtrl', function($scope) {
        $scope.obj = {
          foo: 'bar',
          bar: 'foo'
        };
      });
      app.directive('directiveName', function(){
        return {
            restrict:'E',
            scope: {
               parameter: '@'
            },
            template:'<div>parameter: {{parameter}} foo: {{obj.foo}} bar: {{obj.bar}}</div>',
            controller: function($scope) {
              $scope.obj = JSON.parse($scope.parameter);
            }
          };
        });

    </script>
  </head>

  <body ng-app="yourApp">
    <div ng-controller="FooCtrl">
        <directive-name parameter="{{obj}}"></directive-name>
    </div>
  </body>

</html>

我确实创建了plunker