Turn off animation, modal, angular-ui

Currently, the bootstrap classes are embedded in the directive and need to be overridden. If you want to prevent that vertical ‘drift’ into position of the modal window, place the following 2 classes in your css : .modal.fade { opacity: 1; } .modal.fade .modal-dialog, .modal.in .modal-dialog { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, … Read more

Angular ui-router get asynchronous data with resolve

You need to read the docs for resolve. Resolve functions are injectable, and you can use $stateParams to get the correct value from your routes, like so: resolve: { propertyData: function($stateParams, $q) { // The gapi.client.realestate object should really be wrapped in an // injectable service for testability… var deferred = $q.defer(); gapi.client.realestate.get($stateParams.propertyId).execute(function(r) { deferred.resolve(r); … Read more

Angular UI, Bootstrap Navbar Collapse and Javascript

You should replace bootstrap native js properties with ui-bootstrap directives (note the ng-click and collapse): <nav class=”navbar navbar-default” role=”navigation”> <!– Brand and toggle get grouped for better mobile display –> <div class=”navbar-header”> <button type=”button” class=”navbar-toggle” ng-click=”navbarCollapsed = !navbarCollapsed”> <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=”#”> <!– your branding here … Read more

AngularJS passing data to bootstrap modal

I’d suggest you to pass the scope of your own controller instead of passing same controller again, by doing that you can remove the resolve also. var modalInstance = $uibModal.open({ templateUrl: ‘myModalContent.html’, scope: $scope, //passed current scope to the modal size: ‘lg’ }); Otherwise you need to create a new controller and assign that controller … Read more

ui.bootstrap.datepicker is-open not working in modal

Just change to: is-open=”opened” to: is-open=”$parent.opened” Fixed Demo Plunker So relevant snippets of HTML will look like: <div class=”input-group”> <input type=”text” class=”form-control” datepicker-popup=”dd.MM.yyyy” ng-model=”dt” is-open=”$parent.opened” ng-required=”true” close-text=”Close” /> <span class=”input-group-btn”> <button style=”height:34px;” class=”btn btn-default” ng-click=”open()”> <i class=”icon-calendar”></i></button> <b><- button not working</b> </span> </div>

How to get data from DataTransfer.getData in event Dragover or Dragenter?

Normally you don’t have access to this information on events other than dragstart and drop. Firefox seems to give you access but it seems to go against the standard. The way the data is transfered during a drag and drop is through a data store object, that contains all the information needed for the different … Read more

Handling trailing slashes in angularUI router

There is a link to working plunker And this is the updated rule definition: $urlRouterProvider.rule(function($injector, $location) { var path = $location.path(); var hasTrailingSlash = path[path.length-1] === “https://stackoverflow.com/”; if(hasTrailingSlash) { //if last charcter is a slash, return the same url without the slash var newPath = path.substr(0, path.length – 1); return newPath; } }); And these … Read more

Angular UI select : Fetch data from remote service

In your example, at first you must initialize your availableColors as an empty array: $scope.availableColors = []; Then, you can write your simple service with $http: $http.get(‘data.json’).then( function (response) { $scope.availableColors = response.data; $scope.multipleDemo.colors = [‘Blue’,’Red’]; }, function (response) { console.log(‘ERROR!!!’); } ); So, now you can use this code without pre-defining your availableColors by … Read more

How to clear text from AngularUI typeahead input

I was looking for an answer to this as well, for the longest time. I finally found a resolution that worked for me. I ended up setting the NgModel to an empty string within the typeahead-on-select attribute: In your typeahead-on-select attribute add asyncSelected = ”; behind your select function, like so: <input … typeahead-on-select=”selectMatch(asyncSelected); asyncSelected … Read more

How to make Automated Dynamic Breadcrumbs with AngularJS + Angular UI Router

I did solve this myself awhile back, because nothing was available. I decided to not use the data object, because we don’t actually want our breadcrumb titles to be inherited by children. Sometimes there are modal dialogs and right panels that slide in that are technically “children views”, but they shouldn’t affect the breadcrumb. By … Read more