AngularJS和FancyTree:事件触发,但具有未定义的参数

AngularJS and FancyTree: Events firing, but with undefined parameters

本文关键字:未定义 参数 FancyTree 事件 AngularJS      更新时间:2023-09-26

我正在尝试为fancytree编写一个指令。源代码是通过ajax加载的,几乎所有内容看起来都很有魅力。树显示正确,事件触发良好,但控制器端的参数未定义。

这看起来很奇怪,因为当我为事件设置function(event, data){ ... }时(如文档中所示的activatebeforeSelect),eventdata都设置得很好。

我哪里做错了?

提前谢谢!

指令

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

控制器

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

指令的函数绑定中缺少一个重要部分。它们需要作为属性名称和参数名称相同的对象传入。即

scope.activateFn(event, data);

应该是

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

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

尽管一开始语法可能会令人困惑,但您也可以使用=绑定而不是&,尽管&将专门用于函数绑定。例如:

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

 activate-fn="genericEvt"