尝试使用指令将jQuery插件回调函数传递给控制器​​函数

Question

我正在使用jQuery插件来实现我想要使用的一些回调。我试图将回调函数直接发送到控制器，但参数没有正确发送。

这是我的代码

flairApp.directive('fullpage', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).fullpage({
                afterLoad: function(anchorLink, index){
                    scope.afterLoad(anchorLink, index)
                }
            });
        }
    };
});

和控制器

angular.module('homeController', ['ngSanitize'])

.controller('homeController', function($scope, Blog, $stateParams) {

    $scope.afterLoad = function (anchorLink, index) {
        console.log(anchorLink);
    };

});

html只有指令

<div fullpage></div>

如果我可以使用指令调用函数，可能会很棒：

<div fullpage after-load="afterload"></div>

提前致谢。

Answer 1

$(element).fullpage()将选项对象作为其参数。在此选项对象中，您有一些选项，例如afterLoad。传递给afterLoad的函数在fullpage的内容中作为回调执行。

您可以在指令定义中将函数传递给指令：

scope: {
  afterLoadCallback: '&' // this value is attached to scope.afterLoadCallback
}

'＆amp;'意味着我们想要传递一个函数。还有'@'和'='，它们的行为略有不同。

因此...

flairApp.directive('fullpage', function() {
    return {
        restrict: 'A',
        scope: {
          afterLoadCallback: '&' // this value is attached to scope.afterLoad
        },
        link: function(scope, element, attrs) {
            $(element).fullpage({
                afterLoad: scope.afterLoadCallback // comes from function passed into directive in the view
            });
        }
    };
});

并在您看来：

<div fullpage after-load-callback="foo()"></div>其中foo位于控制器范围内，该控制器控制使用fullpage的视图。

Answer 2

  

如果我可以使用指令调用函数，可能会很棒：

<div fullpage after-load="afterload(anchorLink,index)"></div> 

这可以使用指令

中的隔离范围来完成

来自文档：

&或&attr - 提供了在父作用域的上下文中执行表达式的方法。如果未指定attr名称，则假定属性名称与本地名称相同。给定<widget my-attr="count = count + value">和scope: { localFn:'&myAttr' }的窗口小部件定义，然后隔离范围属性localFn将指向count = count + value表达式的函数包装器。通常需要通过表达式将数据从隔离范围传递到父范围，这可以通过将局部变量名称和值的映射传递到表达式包装器fn来完成。例如，如果表达式为increment(amount)，那么我们可以通过将localFn称为localFn({amount: 22})来指定金额值。

https://docs.angularjs.org/api/ng/service/$compile#scope

Answer 3

您可以创建一个隔离的范围，并使用&绑定传递回调函数。

此post对了解其工作原理也很有用。

请查看下面的演示或此fiddle。

我还添加了anchors绑定，以便afterLoad返回有用的内容。在此之前它返回undefined。

＆＃13;

＆＃13;

angular.module('demoApp', [])
  .controller('MainController', function($scope) {
    $scope.callback = function(link, index) {
      console.log(link, index);
    };

    $scope.anchorLinks = ['firstPage', 'secondPage', 'thirdPage'];
  })
  .directive('fullpage', function() {
    return {
      restrict: 'A',
      scope: {
        anchors: '=',
        afterLoad: '&'
      },
      link: function(scope, element, attrs) {
        $(element).fullpage({
          anchors: scope.anchors,
          afterLoad: function(anchorLink, index) {
            scope.afterLoad({
              link: anchorLink,
              index: index
            });
          }
        });
      }
    };
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.css" rel="stylesheet" />
<div ng-app="demoApp" ng-controller="MainController">
  <div fullpage after-load="callback(link,index)" anchors="anchorLinks">
    <div class="section">first section</div>
    <div class="section">second section</div>
    <div class="section">third section</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;