AngularJs 指令：从模板内的父范围调用方法

Question

我对 Angular 指令还很陌生，我在让它做我想做的事情时遇到了很多麻烦。这是我所拥有的基础知识：

控制器：

controller('profileCtrl', function($scope) {
  $scope.editing = {
    'section1': false,
    'section2': false
  }
  $scope.updateProfile = function() {};
  $scope.cancelProfile = function() {};
});

指令：

directive('editButton', function() {
  return {
    restrict: 'E',
    templateUrl: 'editbutton.tpl.html',
    scope: {
      editModel: '=ngEdit'
    }
  };
});

模板（editbutton.tpl.html）：

<button
  ng-show="!editModel"
  ng-click="editModel=true"></button>
<button
  ng-show="editModel"
  ng-click="updateProfile(); editModel=false"></button>
<button
  ng-show="editModel"
  ng-click="cancelProfile(); editModel=false"></button>

HTML：

<edit-button ng-edit="editing.section1"></edit-button>

如果不清楚，我希望<edit-button> 标记包含三个不同的按钮，每个按钮与传递给ng-edit 的任何范围属性交互。单击时，他们应该更改该属性，然后调用适当的范围方法。

现在的情况是，单击按钮会正确更改$scope.editing 的值，但updateProfile 和cancelProfile 方法不起作用。我可能无法正确使用指令，但我无法在网上找到一个示例来帮助我完成我想做的事情。任何帮助将不胜感激。

Answer 1

一种方法是使用$parent 调用函数。

<button ng-show="editModel" ng-click="$parent.cancelProfile(); editModel=false">b3</button>

Demo

另一种方法（可能是更好的方法）是配置指令的隔离范围以包含对这些控制器函数的引用：

app.directive('editButton', function() {
  return {
    restrict: 'E',
    templateUrl: 'editbutton.tpl.html',
    scope: {
      editModel: '=ngEdit',
      updateProfile: '&',
      cancelProfile: '&'
    }
  };
});

然后你通过 HTML 传入函数：

<edit-button ng-edit="editing.section1" update-profile='updateProfile()' cancel-profile='cancelProfile()'></edit-button>

Demo