javascript AngularJs 指令：从模板内的父作用域调用方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24513564/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJs directive: call method from parent scope within template
提问by Will Durney
I'm pretty new to Angular directives, and I'm having a lot of trouble getting this to do what I want. Here's the basics of what I have:
我对 Angular 指令还很陌生，我在让它做我想做的事情时遇到了很多麻烦。这是我所拥有的基础知识：
Controller:
控制器：
controller('profileCtrl', function($scope) {
$scope.editing = {
'section1': false,
'section2': false
}
$scope.updateProfile = function() {};
$scope.cancelProfile = function() {};
});
Directive:
指示：
directive('editButton', function() {
return {
restrict: 'E',
templateUrl: 'editbutton.tpl.html',
scope: {
editModel: '=ngEdit'
}
};
});
Template (editbutton.tpl.html):
模板（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:
HTML：
<edit-button ng-edit="editing.section1"></edit-button>
If it's not clear, I want the <edit-button>tag to contain with three different buttons, each interacting with whatever scope property is passed into ng-edit. When clicked, they should change that property then call the appropriate scope method.
如果不清楚，我希望<edit-button>标签包含三个不同的按钮，每个按钮都与传入的任何范围属性进行交互ng-edit。单击时，他们应该更改该属性，然后调用适当的范围方法。
The way it is now, clicking the buttons correctly changes the values of $scope.editing, but the updateProfileand cancelProfilemethods don't work. I may be way off base on how to use directives properly, but I'm having trouble finding an example online to help me accomplish what I'm trying to do. Any help would be appreciated.
现在的情况是，正确单击按钮会更改 的值$scope.editing，但updateProfile和cancelProfile方法不起作用。我可能不太了解如何正确使用指令，但是我无法在线找到示例来帮助我完成我正在尝试做的事情。任何帮助，将不胜感激。
回答by Jerrad
One way would be to call the functions using $parent.
一种方法是使用$parent.
<button ng-show="editModel" ng-click="$parent.cancelProfile(); editModel=false">b3</button>
Another way (and probably the better way), is to configure your directive's isolated scope to contain references to those controller functions:
另一种方法（可能是更好的方法）是配置指令的隔离范围以包含对这些控制器函数的引用：
app.directive('editButton', function() {
return {
restrict: 'E',
templateUrl: 'editbutton.tpl.html',
scope: {
editModel: '=ngEdit',
updateProfile: '&',
cancelProfile: '&'
}
};
});
Then you pass the functions in via HTML:
然后通过 HTML 传递函数：
<edit-button ng-edit="editing.section1" update-profile='updateProfile()' cancel-profile='cancelProfile()'></edit-button>
