Question

我有以下代码：

(function() {
  'use strict';

  angular
    .module('app', []);

})();


(function() {
    'use strict';

    angular
        .module('app')
        .controller('MainController', MainController);

    function MainController() {
        var vm = this;

        vm.onResize = function(viewport) {
            console.log('onResize', viewport);
        };
    }

})();


(function() {
  'use strict';

  angular
    .module('app')
    .directive('resize', resize);

  function resize($window) {
    var directive = {
      restrict: 'A',
      scope: {
        callback: '&resize'
      },
      link: link
    };

    return directive;

    function link(scope) {

      angular.element($window).on('resize', function() {

        scope.callback({
          width: 100,
          height: 200
        });

      });

    }
  }

})();

Plnkr演示：http://plnkr.co/edit/s7x28XI08QUytTVORtaK

正如您所看到的，我正在尝试使用回调函数创建一个简单的resize指令，我将在调整窗口大小后调用它。我的问题是我想将一些参数传递给回调函数，但它目前还没有工作。而不是我传递给viewport函数内的回调onResize参数的对象是undefined。我是Angular的初学者，所以解释我在这里做错了什么将非常感激。谢谢。

Answer 1

只需将函数引用传递给指令

即可

<div resize="vm.onResize"></div>

JS

var directive = {
  restrict: 'A',
  scope: {
    callback: '=resize'
  },
  link: link
};

的 DEMO

从带有参数的指令调用控制器函数

1 个答案: