PatrickJS / NG6-starter

:ng: An AngularJS Starter repo for AngularJS + ES6 + Webpack
https://angularclass.github.io/NG6-starter
Apache License 2.0
1.91k stars 1.35k forks source link

Using modal, how come separate controller doesnt work? #158

Closed pkishino closed 8 years ago

pkishino commented 8 years ago

Hey all, first of all, thank you very much for such a great project to start of from. I have a question regarding the use of modals from ui-bootstrap with this that I don't quite understand. Im sure its something simple that I must have missed. anyways. the following is what currently works for me

sites.controller.js

import sites from './sites.json';

class SitesController {
    constructor($uibModal) {
        this.name = 'sites';
        this.sites = sites;
        this.$uibModal = $uibModal;
    }
    open(site) {
        var modalinstance = this.$uibModal.open({
            template: '<site site="$ctrl.site" close="$ctrl.close()" dismiss="$ctrl.dismiss()"></site>',
            controllerAs:'$ctrl',
            controller: ['$uibModalInstance',
            function ($uibModalInstance) {
                this.site = site;
                this.close = $uibModalInstance.close;
                this.dismiss = $uibModalInstance.dismiss;
            }]
        });
        modalinstance.result.then(function() {}, function() {
            console.log('Dismissed modal');
        });
    }
}
SitesController.$inject = ['$uibModal'];
export default SitesController;

and this is the site component file with the bindings. site.component.js

import template from './site.html';

let siteComponent = {
    restrict: 'E',
    bindings: {
        site: '<',
        close: '&',
        dismiss: '&'
    },
    template
};

export default siteComponent;

I was trying all kinds of ways to externalize the site.controller from sites.controller but couldnt get it to work. Even with resolve and injecting uibModalInstance into the site.controller etc and adding the template to site.html it wouldnt work. Either it complained about no such provider (modalInstance) or it would not resolve the site/close/dismiss properties. I am aware ui-bootstrap isnt fully 1.5 compliant and thus you need the controllerAs etc, but is there a way I can clean this up a bit more ? Any help appreciated.