Question

我见过几个帖子，但由于某种原因，我无法让我的榜样上班。我甚至有旧的项目，这个工作正常，但我尝试过的最后两个已经没有了。

问题是我正试图从我的指令'＆amp;'中传回一个参数内在的功能。我有两次攻击，似乎都不起作用：

攻击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

关于函数绑定的棘手部分是，您需要在绑定函数中指定参数名称，与传入的对象中使用的键完全相同。在您的示例中，传入的对象是<wok clicked="whenClicked(s)"></wok>所以当您绑定它应该是的函数：

但是代替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>

clicked: '='

<强> Documentation

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

但是如果你使用带有函数引用的双向绑定，

$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>

x <- rep(0, 100)

Answer 2

克里斯

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

查看此plunker

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

2 个答案: