指令函数参数未定义

Question

指令模板URL：

<div class="filter-input" ng-click="changeVisualization('trocaparaeste')">

指令：

app.directive('asideFilter', function() {
 return {
  restrict: 'E',
  scope: {
    categories: "=",
    change: "&onChange",
    changeVisualization: '&onChangeVisualization'

  },
  templateUrl: 'assets/directives/asideFilter/asideFilter.html',
  controller: function($scope){
  }
 };
});;

指令用法：

<aside-filter change-visualization="onChangeVisualization()"/>

我正在尝试获取参数数据的控制器：

  $scope.onChangeVisualization = function(option) {
   console.log('option', option);
  }

解决方案：

指令模板URL：

<aside-filter on-change-visualization="onChangeVisualization(option)"/>

指令：

app.directive('asideFilter', function() {
  return {
    restrict: 'E',
    scope: {
        categories: "=",
        change: "&onChange",
        changeVisualization: '&onChangeVisualization'

    },
    templateUrl: 'assets/directives/asideFilter/asideFilter.html',
    link: function(scope){
      // pass 'option' variable so it can be used in the callback
      scope.changeVisualization({ option: "worked!" });
    }
  };
});;

指令用法：

<aside-filter change-visualization="onChangeVisualization(option)"/>

Answer 1

你们的名字换了：

scope: {
    // prefixed with 'on'
    // so usage: <my-directive on-change-visualization="someFunc(option)"/>
    changeVisualization: '&onChangeVisualization'
},
// example:
link: function($scope) {
    scope.changeVisualization = scope.changeVisualization || angular.noop;

    // pass 'option' variable so it can be used in the callback
    scope.changeVisualization({ option: "worked!" });
}

并将您的html更改为：

<!-- with the prefixed 'on-' -->
<aside-filter on-change-visualization="onChangeVisualization(option)" />

在您的控制器中：

$scope.onChangeVisualization = function(option) {
    console.log('option', option); // logs: 'option worked!'
}