Benutze UI-Bootstrap Modal mit Angular-Fullstack und ES6

Question

Ich möchte die ui-bootsrap Modal mit der AngularJS Fullstack Generator & ES6 verwenden, aber es funktioniert nicht. Ich möchte ein Projekt auswählen, auf "Bearbeiten" klicken und das Projekt in einem großen Modal bearbeiten. Aber ich bekomme das Modal nicht zu öffnen.

in der Konsole, erhalte ich diese Fehlermeldung:

"Error: $modal is not defined" 

My Project Controller wie folgt aussieht:

'use strict'; 

(function() { 

    class ProjectCtrl { 

    constructor(Project, $modal, $log) { 
     this.project = Project; 
     this.projects = []; 
     this.getAllProjects(Project); 
     this.$modal = $modal; 
     this.log = $log; 
    } 

    // Open a modal window to Update a single Project 
    modalUpdate(size, selectedProject) { 
     var modalInstance = $modal.open({ 
     templateUrl: 'app/project/project-edit.modal.html', 
     controller: function ($scope, modalInstance, aProject) { 
      $scope.project = aProject; 
     }, 
     size: size, 
     resolve: { 
      aProject: function() { 
      return selectedProject; 
      } 
     } 
     }); 

     modalInstance.result.then(function (selectedItem) { 
     this.selected = selectedItem; 
     }, function() { 
     $log.info('Modal dismissed at: ' + new Date()); 
     }); 
    }; 
    } 

angular.module('projectApp') 
    .controller('ProjectCtrl', ProjectCtrl); 
})(); 

app.js wie folgt aussieht:

'use strict'; 

angular.module('projectApp', [ 
    'projectApp.constants', 
    'ngCookies', 
    'ngResource', 
    'ngSanitize', 
    'ui.router', 
    'ui.bootstrap' 
]) 
    .config(function($urlRouterProvider, $locationProvider) { 
    $urlRouterProvider 
     .otherwise('/'); 

    $locationProvider.html5Mode(true); 
    }); 

Der Button des Modal zu öffnen:

<button type="button" class="btn btn-default btn-xs pull-right" ng-click="ProjectCtrl.modalUpdate('lg', project)"><span aria-hidden="false"></span> Edit</button> 

Meine Vermutung ist, dass in ProjectCtrl, ich habe irgendwie zu $ ​​injizieren 'Projekt', '$ modal' & '$ log', aber ich weiß nicht, wie und wo.

Answer 1

Ich löste das Modal Problem auf eine andere Weise, weil es scheint, dass UI Bootstrap in ES6 nicht funktioniert. Zumindest nicht jetzt.

Ich habe den Modal Service here für Angular-Fullstack verwendet.

Hier ist ein einfaches Beispiel mit einem Lösch Modal:

'use strict'; 

(function() { 

class AdminController { 
    constructor(User, Modal) { 
    // Use the User $resource to fetch all users 
    this.users = User.query(); 
    this.modal = Modal; 
    } 

    delete(user) { 
    var deleteConfirmationModal = this.modal.confirm.delete((user) => { 
     user.$remove(); 
     this.users.splice(this.users.indexOf(user), 1); 
    }); 

    deleteConfirmationModal(user.name, user); 
    } 
} 

angular.module('sampleApp.admin') 
    .controller('AdminController', AdminController); 

})(); 

Dies ist, wie die Modal wie folgt aussieht:

Answer 2

Welche Version von UI-Bootstrap verwenden Sie?

Die Syntax hängt davon ab, welche Version Sie verwenden.

Angenommen, Sie verwenden v0.13.4 oder älter und ohne ES6, hier die Lösung:

HINWEIS: Wenn Sie neuere Version als v0.13.4 verwenden dann $modal durch $uibModal ersetzen und $modalInstance von $uibModalInstance und es sollte auch funktionieren.

---

Erstens, was Sie tun müssen, ist in der Befehlszeile schreiben:

yo angular-fullstack:controller MyModalName 

dann in myModalName.controller.js setzen diese:

.controller('MyModalNameCtrl', function ($scope,$modal) { 

$scope.openModal = function() { 
    var modalInstance = $modal.open({ 
    animation: true, 
    templateUrl: 'testmodal', 
    controller: 'ModalInstanceCtrl', 

    }); 

    modalInstance.result.then(function() {}, function() { 
    console.log('Modal dismissed at: ' + new Date()); 
    }); 
}; 

});

Dann noch in myModalName.controller.js unten setzen:

//change theNameOfYourApp to your corresponding app name ! 
angular.module('theNameOfYourApp').controller('ModalInstanceCtrl', function ($scope, $modalInstance) { 

    $scope.ok = function() { 
    $modalInstance.close(); 
    }; 

    $scope.cancel = function() { 
    $modalInstance.dismiss('cancel'); 
    }; 
}); 

Dann letzten Schritt in Ihrer HTML-Seite, wo Sie die modal angezeigt werden sollen, setzen:

<!--Modal Template--> 
<div ng-controller="MyModalNameCtrl"> 
    <script type="text/ng-template" id="testmodal"> 
    <div class="modal-header"> 
     <h3 class="modal-title">Hello :</h3> 
    </div> 
    <div class="modal-body"> 
     <p>hey, this is the body </p> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-default" type="button" ng-click="ok()">OK</button> 

     <button class="btn btn-default" type="button" ng-click="cancel()">Cancel()</button> 
    </div> 
    </script> 
</div>