javascript - AngularJS 和 FancyTree : Events firing, 但具有未定义的参数

Question

我正在尝试为 fancytree 编写一个指令。源代码是通过 ajax 加载的，几乎所有东西看起来都很迷人。树正确显示，事件触发良好，但参数在 Controller 端未定义。

这看起来很奇怪，因为当我为事件设置一个 function(event, data){ ... } 时(比如 activate 或 beforeSelect 如 docs 中所示) event 和 data 都设置得很好。

我哪里做错了？

提前致谢!

指令

angular.module('MyAppModule', [])
.provider('MyAppModuleConfig', function () {
    this.$get = function () {
        return this;
    };
})
.directive('fancytree', function () {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        scope: {
            activateFn: '&',
            //long list of events, all stated with "<sth>Fn : '&'"
            selectFn: '&',
            selectedNode: '=',
            treeviewSource: '=',
            enabledExtensions: '=',
            filterOptions: '='
        },
        template: '<div id="treeview-container"></div>',
        link: function (scope, element) {
            element.fancytree({
                source: scope.treeviewSource,
                activate: function (event, data) {
                    console.log(event, data); // ok, parameters are all set
                    scope.activateFn(event, data); 
                    // function fires right, but all parameters 
                    // are logged as undefined
                }
            });
        }
    };
});

HTML

    <fancytree ng-if="tvSource" treeview-source="tvSource" 
        activate-fn="genericEvt(event, data)"/>

Controller

  TreeViewSvc.query()
      .success(function (response) {
          $timeout(function ()
          {
              $scope.tvSource = response;
          });
      });
  $scope.genericEvt = function (event, data) {
      console.log('event', event);
      console.log('data', data);
      // function is firing, but all parameters come undefined
  };

Answer 1

您在指令的函数绑定(bind)中遗漏了一个重要的部分。它们需要作为属性名称与参数名称相同的对象传入。即

scope.activateFn(event, data);

应该是

scope.activateFn({event: event,data: data});

或者换句话说，通过绑定(bind)函数({event: e,data: d})传入的对象的属性需要被指定为被绑定(bind)函数的参数(genericEvt(event, data)) 在消费者端。

尽管开始时语法可能会令人困惑，但您也可以使用 = 绑定(bind)而不是 &，尽管要使用 &专门用于函数绑定(bind)。例如:

 ....
 activateFn: '=',
 ....

和

 activate-fn="genericEvt"