I have buttons like submit, reject and cancel. If i click on this button a small div with comment shows up and a ok and cancel button will be shown. On click of ok popup with 'are you sure' message popups up.
我有提交,拒绝和取消等按钮。如果我点击此按钮,会显示一个带注释的小div,并显示确定和取消按钮。点击ok弹出窗口,弹出“你确定”的消息。
<button type="button" ng-click="showDiv = !showDiv">Submit
</button>
<button type="button" ng-click="showDiv = !showDiv">Reject
</button>
I am using a popup modal directive like this for the small div as i mentioned above:
我像上面提到的那样使用像这样的弹出式模态指令:
<div ng-show="showDiv">
<yes-no msg="are you sure"></yes-no>
</div>
Now I want to change the msg on click of each button. Suppose if i click 'Submit' my msg should be 'are you sure to submit' if i click 'reject' my msg should be 'are you sure to reject'.
现在我想在点击每个按钮时更改消息。假如我单击“提交”我的消息应该是'你确定要提交'如果我点击'拒绝'我的消息应该是'你确定要拒绝'。
directive:
mainapp.directive('yesNo', function($modal){
return {
restrict: 'A',
scope: {
msg: '@msg'
},
link: linkFn
};
function linkFn(scope, element, attrs) {
var msg = attrs.msg;
var modalTemplate = '<div class="modal-content">' +
' <div class="modal-body">' +
' <h4 class="modal-title">' + msg + '</h4>' +
' </div>';
var modalInstance = $modal.open({
template: modalTemplate,
controller: 'yesNoModalCtrl'
});
});
}
});
How to achieve this? I will not be able to post the code here.
怎么做到这一点?我将无法在此处发布代码。
2 个解决方案
#1
1
<input type="button" name="submit" ng-click="buttonclick('are you sure to submit')"/>
<input type="button" name="reject" ng-click="buttonclick('are you sure to reject')"/>
<div ng-show="showDiv">
<yes-no msg={{message}}></yes-no>
</div>
In you main controller:
在你的主控制器:
app.controller("mainController", function($scope){
$scope.message="";
$scope.buttonclick = function(msg){
$scope.message= msg;
}
});
app.directive("yesNo", function(){
return{
restrict: 'E',
scope:{
msg:'@'
},
link: linkFn,
controller: 'yesNoModalCtrl'
}
});
In directives Link function
在指令链接功能
function linkFn(scope, element, attrs) {
attrs.$observe('msg', function(msg) {
// this function gets triggered each time "msg" is changed
// You can do whatever you want here
if (msg) {
var modalTemplate = '<div class="modal-content">' +
' <div class="modal-body">' +
' <h4 class="modal-title">' + msg + '</h4>' +
' </div>';
var modalInstance = $modal.open({
template: modalTemplate,
controller: 'yesNoModalCtrl'
});
}
});
}
#2
0
Create a controller function:
创建一个控制器功能:
$scope.showModal = function(msg) {
$scope.showDiv = !$scope.showDiv;
$scope.msg = msg;
}
And in your buttons:
在你的按钮:
<button type="button" ng-click="showModal('Are you sure')">Submit
</button>
<button type="button" ng-click="showModal('Some other text')">Reject
</button>
<div ng-show="showDiv">
<yes-no msg="msg"></yes-no>
</div>
#1
1
<input type="button" name="submit" ng-click="buttonclick('are you sure to submit')"/>
<input type="button" name="reject" ng-click="buttonclick('are you sure to reject')"/>
<div ng-show="showDiv">
<yes-no msg={{message}}></yes-no>
</div>
In you main controller:
在你的主控制器:
app.controller("mainController", function($scope){
$scope.message="";
$scope.buttonclick = function(msg){
$scope.message= msg;
}
});
app.directive("yesNo", function(){
return{
restrict: 'E',
scope:{
msg:'@'
},
link: linkFn,
controller: 'yesNoModalCtrl'
}
});
In directives Link function
在指令链接功能
function linkFn(scope, element, attrs) {
attrs.$observe('msg', function(msg) {
// this function gets triggered each time "msg" is changed
// You can do whatever you want here
if (msg) {
var modalTemplate = '<div class="modal-content">' +
' <div class="modal-body">' +
' <h4 class="modal-title">' + msg + '</h4>' +
' </div>';
var modalInstance = $modal.open({
template: modalTemplate,
controller: 'yesNoModalCtrl'
});
}
});
}
#2
0
Create a controller function:
创建一个控制器功能:
$scope.showModal = function(msg) {
$scope.showDiv = !$scope.showDiv;
$scope.msg = msg;
}
And in your buttons:
在你的按钮:
<button type="button" ng-click="showModal('Are you sure')">Submit
</button>
<button type="button" ng-click="showModal('Some other text')">Reject
</button>
<div ng-show="showDiv">
<yes-no msg="msg"></yes-no>
</div>