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>

这是一个有效的example。

Answer 2

如果您想使用表达式（＆＃39;＆amp;＆＃39;）语法将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/

Scope函数没有收到回调参数

3 个答案: