javascript - 另一个 Angular 指令函数不传递参数

Question

我看过几篇文章，但由于某种原因我无法让我的示例工作。我什至有一些旧项目，效果很好，但我尝试的最后两个项目却失败了。

问题是我试图从指令“&”内部函数传回参数。我有两次攻击，但似乎都不起作用:

攻击1:简单地使用相同的回调名称，link中没有任何内容

angular.module('directiveBit', [])
  .controller('tst', function($scope) {
    $scope.thing = {
      crazy: 'filler'
    };

    $scope.whenClicked = function(thing) {
      console.log('the thing', thing);
      $scope.thing = thing;
    }
  })
  .directive('wok', function() {
    return {
      restrict: 'E',
      template: '<button ng-click="clicked({s:1})">Click Me</button>',
      scope: {
        clicked: '&'
      },
      link: function(scope, element, attr) {

      }
    }
  });

这似乎失败了，发送到 whenClicked 的参数始终未定义。 http://embed.plnkr.co/IpbIwzmxUrKgJqZ0DExI/script.js

攻击 2:使用链接函数并在指令中调用不同的函数:

angular.module('directiveBit', [])
  .controller('tst', function($scope) {
    $scope.thing = {
      crazy: 'filler'
    };

    $scope.whenClicked = function(thing) {
      console.log('the thing', thing);
      $scope.thing = thing;
    }
  })
  .directive('wok', function() {
    return {
      restrict: 'E',
      template: '<button ng-click="doIt({s:1})">Click Me</button>',
      scope: {
        clicked: '&'
      },
      link: function(scope, element, attr) {
        scope.doIt = function(theThing) {
          scope.clicked({a: theThing});
        }
      }
    }
  });

这似乎又失败了。它调用 whenClicked 函数，但参数中仍然没有任何内容。 http://embed.plnkr.co/VKXF5Yz2lYcKpKdS8pvE/script.js

有谁知道我在这里缺少什么简单的东西？

Answer 1

关于函数绑定(bind)的棘手部分是，您需要在绑定(bind)函数中指定与传入对象中使用的键完全相同的参数名称。在您的示例中，传入的对象是 {s:someStuff} 所以当你绑定(bind)函数时它应该是:

 <wok clicked="whenClicked(s)"></wok>

但是您使用的是不同的参数名称，例如thi，而不是s，它不是从指令传入的对象的属性，因此您没有任何值，命令 Angular 解析器解析属性 s 的值并将其作为参数传递给引用的函数。

angular.module('directiveBit', [])
  .controller('tst', function($scope) {
    $scope.thing = {
      crazy: 'filler'
    };

    $scope.whenClicked = function(thing) {
      console.log('the thing', thing);
      $scope.thing = thing;
    }
  })
  .directive('wok', function() {
    return {
      restrict: 'E',
      template: '<button ng-click="clicked({s:1})">Click Me</button>',
      scope: {
        clicked: '&'
      },
      link: function(scope, element, attr) {

      }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<div ng-app="directiveBit" ng-controller="tst">
  <wok clicked="whenClicked(s)"></wok>
</div>

<强> Documentation

Often it's desirable to pass data from the isolate scope via an expression to the parent scope, this can be done by passing a map of local variable names and values into the expression wrapper fn. For example, the hideDialog function takes a message to display when the dialog is hidden. This is specified in the directive by calling close({message: 'closing for now'}). Then the local variable message will be available within the on-close expression.

但是如果您使用带有函数引用的 2 路绑定(bind)，

clicked: '='

你可以做

$scope.clicked(anyStuff);

或

template: '<button ng-click="clicked(1)">Click Me</button>',

并用作:

<wok clicked="whenClicked"></wok>

angular.module('directiveBit', [])
  .controller('tst', function($scope) {
    $scope.thing = {
      crazy: 'filler'
    };

    $scope.whenClicked = function(thing) {
      console.log('the thing', thing);
      $scope.thing = thing;
    }
  })
  .directive('wok', function() {
    return {
      restrict: 'E',
      template: '<button ng-click="clicked(1)">Click Me</button>',
      scope: {
        clicked: '='
      },
      link: function(scope, element, attr) {

      }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<div ng-app="directiveBit" ng-controller="tst">
  <wok clicked="whenClicked"></wok>
</div>