OK, so first of all the http://angular-ui.github.io/bootstrap/ has a <modal> directive and the $dialog service and both of those can be used to open modal windows. The difference is that with the <modal> directive content of a modal is embedded in a hosting template (one that triggers modal window opening). The $dialog service is far … Read more
Update 2015-06 Based on antoinepairet’s comment/example: Using uib-collapse attribute provides animations: http://plnkr.co/edit/omyoOxYnCdWJP8ANmTc6?p=preview <nav class=”navbar navbar-default” role=”navigation”> <div class=”navbar-header”> <!– note the ng-init and ng-click here: –> <button type=”button” class=”navbar-toggle” ng-init=”navCollapsed = true” ng-click=”navCollapsed = !navCollapsed”> <span class=”sr-only”>Toggle navigation</span> <span class=”icon-bar”></span> <span class=”icon-bar”></span> <span class=”icon-bar”></span> </button> <a class=”navbar-brand” href=”#”>Brand</a> </div> <div class=”collapse navbar-collapse” uib-collapse=”navCollapsed”> <ul class=”nav … Read more
If you add both bootstrap & angular-material this is what will happen Both have css which will target your front end elements (e.g. input element, buttons) Each have their own look & feel (i.e. Bootstrap input element is different from Material input element). So, your overall project won’t have one single look & feel. If … Read more
The answer is in the documentation, right after the two lines you quoted: The open method returns a modal instance, an object with the following properties: close(result) – a method that can be used to close a modal, passing a result dismiss(reason) – a method that can be used to dismiss a modal, passing a … Read more
Yes, directives from http://angular-ui.github.io/bootstrap are highly customizable and it is easy to override one of the templates (and still rely on the default ones for other directives). It is enough to feed $templateCache, either feeding it directly (as done in the ui-bootstrap-tpls file) or – probably simpler – override a template using the <script> directive … Read more
I use a css class like so to target the modal-dialog class: .app-modal-window .modal-dialog { width: 500px; } Then in the controller calling the modal window, set the windowClass: $scope.modalButtonClick = function () { var modalInstance = $modal.open({ templateUrl: ‘App/Views/modalView.html’, controller: ‘modalController’, windowClass: ‘app-modal-window’ }); modalInstance.result.then( //close function (result) { var a = result; }, … Read more
Probably the simplest way to solve this is to create a directive on your app with the same name as the third party directive. Both directives will run and you can specify their run order using the priority property (higher priority runs first). The two directives will share scope and you can access and modify … Read more
So, ui-bootstrap-tpls.min.js == (ui-bootstrap.min.js + HTML templates) required by the JavaScript code. If you only included ui-bootstrap.min.js, you will also need to provide your own HTML templates. Otherwise you will see something like: GET http://localhost:8989/hello-world/template/tooltip/tooltip-popup.html 404 (Not Found) angular.js:7073 Error: [$compile:tpload] http://errors.angularjs.org/undefined/$compile/tpload?p0=template%2Ftooltip%2Ftooltip-popup.html at Error (<anonymous>) at http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:6:453 at http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:54:14 at http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:64:438 at A (http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:89:258) at … Read more