指令函数参数未定义

时间:2016-09-28 11:54:39

标签: angularjs

指令模板网址:

<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);
  }

解决方案:

指令模板网址:

<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)"/>

1 个答案:

答案 0 :(得分:2)

您已切换姓名:

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!'
}