Question

我正在尝试使用angular 1.4将带有参数的函数从控制器绑定到指令。

我的指示如下：

var InvoiceSearchController = function() {
    this.searchCriteriaChanged("test");
};

var invoiceSearchComonent = ['invoiceDataService', function (invoiceDataService) {
    return {
        restrict: 'E',
        scope: true,
        templateUrl: path.fromRoot("/application/invoices/views/invoicesearch.html"),
        controller: InvoiceSearchController,
        controllerAs: 'vm',
        bindToController: {
            searchCriteriaChanged: '&'
         }
     };
}];

module.directive('invoicesearch', invoiceSearchComonent);

我的控制器看起来像这样：

module.controller('contractorsInvoiceCtrl', ['$scope', '$timeout', 'invoiceDataService', function($scope, $timeout, invoiceDataService) {
    $scope.onSearchCriteriaChanged = function(args) {
        console.log(args);
     };
}]);

在我的模板中，我称之为尝试绑定：

<invoicesearch search-criteria-changed="onSearchCriteriaChanged(args)"></invoicesearch>

但我收到错误：

TypeError：不能在＆＃39;中使用＆＃39;运营商搜索＆＃39; onSearchCriteriaChanged＆＃39;在测试中

如何将控制器中的函数绑定到带参数的指令。我想我错过了一些基本的东西。

以下是显示问题的plunker

Answer 1

在模板中，尝试将args作为对象传递，例如：

<invoicesearch search-criteria-changed="onSearchCriteriaChanged({value:args})"></invoicesearch>

进入控制器

$scope.onSearchCriteriaChanged = function(value) {
        //manipulate value object
     };

更新

我创建了一个示例，它在自定义指令中有一个<select>元素，每当用户从保管箱中选择一个值时，它会在调用控制器函数时将所选对象传递给控制器。

指令

.directive('eventHallsList', function($timeout, $log, $http, $compile) {
    return {
      restrict: 'AE',
      replace: true,
      scope: {
        changeHall: '&',
        items: '=',
        model: '='
      },
      templateUrl: 'mytemplate.tpl.html',
      link: function(scope, element, attrs) {
      }

    }

mytemplate.tpl.html

<select style="color:#337ab7"
        ng-change="changeHall({value:model})" ng-model="model"
        ng-options="item as item.name for item in items">
    <option value=""> choose hall</option>
</select>

直播：http://plnkr.co/edit/iCS0blQjceA4tIIb8bUV?p=preview

希望能帮助你好运。

Answer 2

我的工作方式是传递一个对象，该对象具有与模板中指定的参数名称相匹配的属性。在模板中，我指定我传递args对象。

<invoicesearch search-criteria-changed="onSearchCriteriaChanged(args)" contractors="contractors"></invoicesearch>

然后当我在指令控制器中调用bound函数时，我确保它有一个名为args的属性：

  var myArgs = {foo: 'bar'};
  this.searchCriteriaChanged({args: myArgs});

不确定角度1.5是否更好，但我发现这非常不直观。

使用从controller到directive的参数绑定函数

2 个答案:

更新

指令