从指令和功能访问控制器范围

Question

我创建了一个简单的指令来运行控制器功能。

我预计在调用函数时，它会改变AppCtrl上的数据，但它没有发生。

我无法理解为什么这是一种单向约束，或者如何以两种方式实现它。

<div ng-app="app" ng-controller="AppCtrl as appctrl">
  {{appctrl.data}}
  <div dataupdater="appctrl.updateData">Click here to update the data</div>
</div>

带指令的控制器

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

app.controller('AppCtrl', function($scope) {
  var self = this;
  self.data = 'initial data';
  self.updateData = function() {
    var olddata = self.data;
    self.data = 'updated data';
    alert('updated data from "' + olddata + '" to "' + self.data + '"');
  };
});

app.directive('dataupdater', function() {
  return {
    restrict: 'A',
    scope: { callback: '&dataupdater' },
    link: function(scope, element, attrs) {
      var handleClick = function(e) {
        e.stopPropagation();
        e.preventDefault();
        scope.callback()();
      };
      element.bind('click', handleClick);
    }
  };
});

https://jsfiddle.net/p90oshpq/4/