Question

我正在学习angularjs。我将参数传递给指令时遇到问题。
如果模板具有myJson变量名而不是{{jsonVar}}，则表示正确显示该表。但是，当我试图通过参数{{jsonVar}}将json对象名称传递给指令时，它不会加载模板本身。任何人都可以帮助我为什么它不起作用。
在控制器中，sample.json被加载到myJson变量中
请让我知道我在做什么错。代码示例如下所示：Plunkr URL也会发布以供参考。
提前致谢

    var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $http) {
  $scope.name = 'World';

  $scope.myJson = null;
  $http.get('sample.json').success(function(data) {
    $scope.myJson = data;
    console.log($scope.myJson);
  });
}).directive("myTable", function() {
  return {
    restrict: 'E',
    scope: {
      jsonVar: '@'
    },
    template: "<table>" +
      "<thead >" +
      " <tr><td ng-repeat='(key,val) in {{jsonVar}}'>{{key}}</td></tr>" +
      "</thead>" +
      "<tbody>" +
      "<tr ng-repeat='obj in {{jsonVar}}'>" +
      "<td ng-repeat='(key,val) in obj'>{{val}} </td>" +
      "</tr>" +
      "</tbody>" +
      "</table>"

  };
});

我将参数传递给指令，如下所示：

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>

 <my-table jsonVar="myJson"></my-table>

https://plnkr.co/edit/RMe45N3bgJV5lYdNyetX?p=preview

Answer 1

你想要的是对 jsonVar 的引用。您应该将指令的范围定义更改为。

＆＃13;

  scope: {
    jsonVar: '=' // 2 way binding by reference
  }

＆＃13;

此外，驼峰式的属性会以html中的短划线进行转换。

＆＃13;

<my-table json-var="myJson"></my-table>

＆＃13;

我强烈建议您阅读发现here指令的文档，无论它有多长。

无法将参数传递给angularjs指令

1 个答案: