Question

在我的AngularJS项目中，如果顶级视图使用该指令，我可以将范围函数传递给指令。我也可以使用（{obj：mapping}）语法调用参数到这些函数。

如果使用更高级别的指令，并且更高级别的指令需要将该函数传递给低级别（最内层）指令，那么我的成功有限。如果范围函数在由低级指令调用时不需要参数，则可以传递范围函数。但是，如果范围函数采用参数，我无法使低级指令传递参数。

我尝试了在各个级别传递函数的语法的许多变体，使用（），而不是使用（），在各个位置使用占位符，使用指令的对象映射（{someData：'arg'}）

以下示例有效，但如何更改它以在低级指令中传递参数？

JS代码

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

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

  $scope.setName = function(aName) {
    aName = aName || 'it was undefined';
    $scope.name = aName; //wish i could make this be 'low level'
  };
});

app.directive('lowLevel', function() {
  return {
    // todo: pass arg, e.g. action('low level')
    template: '<div><span ng-click="action(\'low level\')">click me once</span></div>',
    scope: {
      action: '&'
    }
  }
});

app.directive('highLevel', function(){
  return {
    template: '<div><low-level action="func({val: \'high level\'})"></low-level></div>',
    scope: {
      func: '&'
    }
  }
});

HTML使用

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <high-level func="setName(val)"></high-level>
  </body>

</html>

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="plunker">
<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <high-level func="setName(val)"></high-level>
</body>
</html>

template: '<div><low-level action="func({val: val})"></low-level></div>',

{{1}}

您可以在模板中使用它来传递参数：

{{1}}

将函数发送到指令

1 个答案: