Last active
August 4, 2016 07:30
-
-
Save wohugb/82466b977b9a50d5c73bf69a38a18ab4 to your computer and use it in GitHub Desktop.
如何在uibModal中使用组件component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
(function(){ | |
class MainComponent { | |
constructor($uibModal,$log){ | |
this.$uibModal = $uibModal; | |
this.$log = $log; | |
} | |
openModal(params){ | |
this.$uibModal.open({ | |
template: '<modal $close="$close(result)" $dismiss="$dismiss(reason)" batch="$ctrl.params"></modal>', | |
resolve:{ | |
params:() => params | |
}, | |
controller: function(params){ | |
this.params = params; | |
}, | |
controllerAs: '$ctrl' | |
}).result.then(result => { | |
this.$log.info(result); | |
if(result) {this.reload();} | |
}, reason => { | |
this.$log.error(reason); | |
this.$log.info('模态打散: ' + new Date()); | |
}); | |
} | |
reload(){ | |
} | |
} | |
angular.module('modalApp') | |
.component('main', { | |
templateUrl: 'main.html', | |
controller: MainComponent | |
}); | |
} | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="modal-header"> | |
<span>摸态框 </span> | |
<span class="close" ng-click="$ctrl.$dismiss({reason:'×'})">×</span> | |
</div> | |
<div class="modal-body"> | |
<pre ng-bind="$ctrl.params | json"></pre> | |
</div> | |
<div class="modal-footer"> | |
<button class="btn" ng-click="$ctrl.ok()">确定</button> | |
<button class="btn" ng-click="$ctrl.$dismiss({reason:'cancel'})">取消</button> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
(function(){ | |
class ModalComponent { | |
constructor(){ | |
} | |
ok(){ | |
let $ctrl = this; | |
console.log(this); | |
$ctrl.$close({result:'save ok!'}); | |
} | |
} | |
angular.module('modalApp') | |
.component('modal', { | |
bindings: { | |
params: '<', | |
$close: '&', | |
$dismiss: '&' | |
}, | |
templateUrl: 'modal.html', | |
controller: ModalComponent | |
}); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment