Scope函数没有收到回调参数

Question

我有一个像这样的控制器：

angular.module('main', []).controller('mainCtrl', function ($scope) {
    $scope.doStuff = function (cb) {
        // Do some stuff.
        cb();
    };
});

我有这样的指示：

angular.module('action-bar', []).directive('actionBar', function () {
    return {
        restrict: 'EA',
        replace: true,
        template: '<h1>test</h1>',
        scope: {
            doStuff: '&'
        },
        link: function (scope, element, attrs) {
            scope.doStuff(function () {
                alert('callback executed');
            });
        }
    };
});

这是标记：

<div ng-app="main">
  <div ng-controller="mainCtrl">
    <div ng-action-bar></div>
  </div>
</div>

我可以调用doStuff ，但是cb参数总是undefined即使我传入一个匿名函数作为回调。 我在这做错了什么？

Answer 1

将隔离范围更改为使用=而不是&允许您访问父范围doStuff方法。

angular.module('main', ['action-bar']).controller('mainCtrl', function ($scope) {
    $scope.doStuff = function (cb) {
        // Do some stuff.
        cb();
    };
});

angular.module('action-bar', []).directive('actionBar', function () {
    return {
        restrict: 'EA',
        replace: true,
        template: '<h1>test</h1>',
        scope: {
            doStuff: '='
        },
        link: function (scope, element, attrs) {
            scope.doStuff(function () {
                alert('callback executed');
            });
        }
    };
});

在您的标记中使用该指令

<div ng-app="main" ng-controller="mainCtrl">
    <action-bar do-stuff="doStuff">
    </action-bar>
</div>

这是一个有效的例子 。

Answer 2

如果你想使用表达式（'＆'）语法将doStuff传递给你的指令，那么在你的html中你应该像这样传递它：

<div action-bar doStuff="doStuff(cb)"></div>

在你的指令的链接函数中，你可以像这样调用它：

scope.doStuff({cb: function() { ... }});

查看egghead.io视频，了解更多信息： https ：//egghead.io/lessons/angularjs-isolate-scope-expression-binding

注意：我个人不喜欢这种语法，所以我总是使用Jonathan Palumbo的解决方案（双向绑定）。

Answer 3

我通过简单地使用scope.$parent来访问父作用域来解决这个问题。 我实际上并不需要将父函数作为指令的隔离范围的一部分。

例：

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

// Main controller.
app.controller('mainCtrl', function ($scope) {
  // Initial text added to log.
  $scope.logs = ['App loaded.'];
  // A log function to add additional lines to the log.
  $scope.log = function (text, callback) {
    $scope.logs.push(text);
    if (callback) callback();
  };
});

// Directive to log lines to the log viewer.
app.directive('ngLogLine', function () {
  return {
    restrict: 'E',
    template: '<div><input type="text" ng-model="msg" ng-keydown="$event.keyCode === 13 ? log() : null" /><button ng-click="log()">send</button></div>',
    replace: true,
    scope: {},
    link: function (scope, element, attrs) {
      // Create our own log function on our isolate scope.
      scope.log = function () {
        // Call parent log function and pass in a callback.
        scope.$parent.log(scope.msg, function () {
          // Clear the msg, clearing the input.
          scope.msg = '';
        });
      };
    }
  };
});

Codepen： http ：//codepen.io/Chevex/pen/eHuaK/