另一个角度指令函数不传递参数

Question

我看过几篇文章，但是由于某种原因，我无法使我的示例发挥作用。 我什至有一些老项目都可以正常工作，但是我尝试过的最后两个项目进展平平。

问题是我正在尝试从指令“＆”内部函数传回参数。 我有两次攻击，但似乎都没有用：

Attack1：只需使用相同的回调名称， 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

关于函数绑定的棘手部分是，您需要在绑定函数中指定参数名称，该参数名称必须与传入对象中使用的键完全相同。在您的示例中，传入对象是{s:someStuff}因此在绑定函数时它应该是 ：

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

但是，与s您使用的是不同的参数名称，例如thi ，它不是指令中传入对象的属性，因此您不会获得任何值。为了使角度解析器能够解析属性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> 

文档

通常希望将数据从隔离范围通过表达式传递到父范围，这可以通过将局部变量名称和值的映射传递到表达式包装器fn中来完成。 例如，当对话框被隐藏时，hideDialog函数将显示一条消息。 在指令中通过调用close（{message：'forsing now''}）来指定。 然后，局部变量消息将在闭合表达式中可用。

但是，如果您将2向绑定与函数引用一起使用，

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> 

Answer 2

克里斯

您忘记命名参数，将"clicked({thi:1})"命名为应为"clicked({thi:1})"的参数，这就是您的参数名称

看看这个矮人