指示 AngularJs: 从模板内的父域调用方法

我是指令的新手 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-click="editModel=true" ng-show="!editModel"></button>
<button ng-click="updateProfile//; editModel=false" ng-show="editModel"></button>
<button ng-click="cancelProfile//; editModel=false" ng-show="editModel"></button>


HTML:


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


如果不清楚,我想要标签
<edit-button>

包含三个不同的按钮,每个按钮都与任何属性进行交互 scope, 转移到B.
ng-edit

. 单击时,它们必须更改此属性,然后调用适当的操作方法。

如何发生这种情况,按下按钮正确更改值
$scope.editing

, 但方法
updateProfile


cancelProfile

不起作用。 也许我远未了解如何正确使用指令,但我很难在互联网上找到一个例子,这将帮助我履行我想要做的事情。 任何帮助将不胜感激。
</edit-button>
已邀请:

小明明

赞同来自:

一种方法会导致功能
$parent

.


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


http://plnkr.co/edit/6hlINYjhNzcTSJoWbsDi
其他方式 /可能是最好的/ - 配置指令的绝缘区域,以便它包含与这些控制器功能的链接:


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


然后你通过功能 HTML:


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


http://plnkr.co/edit/HLqRPIzAz ... eview

要回复问题请先登录注册