gpt4 book ai didi

angularjs - 从AngularJS中的指令模板调用 Controller 函数

转载 作者:行者123 更新时间:2023-12-04 07:22:16 25 4
gpt4 key购买 nike

我已经找到了很多从指令调用 Controller 函数的示例,但是找不到从指令模板调用它的示例。

假设我已经将此HTML代码打开了模式指令

        <button ng-click='toggleModal()'>Open</button>
<modal-dialog show='modalShown' confirm="confirmCtrl()">
<p>Modal Content Goes here<p>
</modal-dialog>

这是我的 Controller ,带有要调用的功能ConfirmCtrl():
myApp.controller('myController', function($scope){
$scope.modalShown = false;
$scope.toggleModal = function() {
$scope.modalShown = !$scope.modalShown;
};
$scope.confirmCtrl = function () {
alert('confirmed');
}

})

这是我的指令。一世
.directive('modalDialog', function(){
return {
restrict: 'E',
scope: {
show: '=',
corfirm: '&'
},
replace: true,
transclude: true,
link: function(scope, element, attrs) {
scope.hideModal = function() {
scope.show = false;
};
},
template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div><button ng-click=""> Confirm </button></div></div>"

};

在我的模板中,我有一个按钮,我想在单击时调用ConfirmCtrl()函数,但是无法掌握如何执行此操作

这是一个工作中的 fiddle http://jsfiddle.net/anao4nsw/

最佳答案

您可以像这样在指令中定义 Controller ,并将ng-click指令添加到模板中的按钮元素“确认”。

.directive('modalDialog', function(){
return {
controller: 'myController' //This line.
restrict: 'E',
scope: {
show: '=',
corfirm: '&'
},
replace: true,
transclude: true,
link: function(scope, element, attrs) {
scope.hideModal = function() {
scope.show = false;
};
},
template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'>
<div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div>
<button ng-click='confirmCtrl()'> Confirm </button></div></div>"

请注意,在模板的最后一行中添加了ng-click ='confirmCtrl()'。

关于angularjs - 从AngularJS中的指令模板调用 Controller 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25218439/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com