FAQ Database Discussion Community


Angular based UI Components, quantumui vs angular-strap vs angular-bootstrap-ui

angularjs,angular-ui,angular-ui-bootstrap,angular-strap,quantum
I have been looking for a component set for a start-up project which would be based on Angular.js After some research, I have found tree common component set which can be applicable. The first is angular bootstrap ui http//angular-ui.github.io/bootstrap/. It seems clear but there is no enough examples and documentation....

Angular Strap - alerts doen't work with directives

javascript,angularjs,twitter-bootstrap,angular-strap
I wrote directive to show notification in some scope: But, bootstrap strap(http://mgcrea.github.io/angular-strap/#/alerts) alert service doesn't add alerts to my directive container, why? app.directive("notification", function ($alert, $rootScope) { return { restrict: "E", template: '<div></div>', link: function (scope, element) { var id = "#alerts-container" + getRandomId(); element.attr("id", id); scope.$on('notificationEvent', function (event, alertArg)...

Customize close button of modal

javascript,jquery,angularjs,twitter-bootstrap,angular-strap
I used modal angular strap in controller, as the following: $scope.modal = $modal({ scope: $scope, title: 'My Title', content: text, html: true, contentTemplate: 'views/partials/myTemplate.html', show: true, keyboard: false, backdrop: "static" }); I need to customize the action of close button in the top of modal at the following image: ....

bs-modal not showing content in AngularStrap

javascript,html,angularjs,angular-strap
That's basically my question, here a Plunker http://plnkr.co/edit/SNFy2XcOBefUavG1QCqD?p=preview <button class="btn btn-default" data-template="customer.tpl.html" bs-modal="modal">New Customer </button> <div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header" ng-show="title"> <button type="button" class="close" ng-click="$hide()">&times;</button> <h4 class="modal-title"...

How to wireup an AngularStrap modal show event

modal-dialog,angular-strap
I have the modal displaying just fine. I'm trying to figure out how to run a function when the modal is shown. var = loginModal = $modal({ placement: 'left', title: '', content: webauth, show: false }); $scope.$on('modal.show', function () { console.log("SHOWN"); debugger; }); $scope.showModal = function () { loginModal.$promise .then(loginModal.show);...

angular-strap: input tag in modal and aside

angularjs,angular-strap
I use an input tag in angular-strap modal: <div class="modal-body" > <input type="text" placeholder="url" class="w-full" > </div> Then I type some words in it and close the modal with hide(). But next time I open the modal, I find that what I typed last time has gone. Am I doing...

Angular-strap how to prevent click event propagation to datepicker element

angularjs,javascript-events,angular-strap
I use angular-strap library to add datepicker element. The input element is in a row, and when i click row, i change it's color. Now when I click on div with class datepicker, or other child table row the event is trigger. I need to prevent it. How can i...

angular-strap modal - pass variable into the modal scope

angularjs,angularjs-scope,angular-strap
How to pass variable in angular-strap modal? Need to pass item params into the modal scope. example.html : <div class="container" ng-controller="ExampleCtrl"> <br> <div class="row"> <div class="col-sm-9 col-sm-offset-1"> <div class="row jumbotron" ng-repeat="item in items"> <div class="col-sm-8"> <h4>{{item.name}}</h4> </div> <div class="col-sm-2"> <button type="button" class="btn btn-lg btn-danger" ng-click="showModal()">Custom Modal <br /> <small>(using...

AngularStrap TypeAhead works after I click around a bunch

angularjs,angularjs-directive,angular-strap
I am trying to use AngularStrap TypeAhead. The feature seems to work, but only after I click around a bunch (or so it appears). I just have stubbed data now so I know it can't be time from pulling data from API, etc. If I put the data in a...

angular-chart zero dimensions inside angular-strap panel

javascript,angular-strap,chart.js,angular-chart
I'm trying to render an angular-chart (based on chart.js) chart inside a bootstrap panel. Currently the chart does not swho at all when inside the panel but does show when placed outside the panel. When I view the source in the browser I see the height and width are set...

Display Tooltip only when if statement is reached

javascript,angularjs,angular-strap
I have around 3 different tooltips in the same view, but I am having some issues with that. I am using AngularStrap I have this if into a function if (index === 1) { $timeout(function() { $scope.tooltip = { title: '<strong>You have to add risk/win</strong>' }; }, 3000); } all...

Use components from both angular-strap and ui-bootstrap

javascript,angularjs,angular-ui-bootstrap,angular-strap
How can I selectively use components from both angular-strap and ui-bootstrap without them colliding and breaking my application? Example: Include custom build of ui-bootstrap which only includes $modal implementation. Try to use $alert from angular-strap. Angular-strap throws an error because it relies on $modal, which is now supplied by ui-bootstrap...

Wrapping AngularStrap Popover

javascript,angularjs,twitter-bootstrap,angular-strap
I'm trying to wrap angular strap's popover with a custom directive. The popover should be able to use a custom template provided by who is using my directive and the template should be able to use the scope of the controller. For the scope part I found I can pass...

how to trigger angular strap bs-select programmatically

javascript,angularjs,angularjs-directive,angular-strap
I'm using angularstrap's bs-select to do a drop down list select. And I want to programmatically trigger the drop down list button with JavaScript. Here is the plunker: Plunker Link I want to use the button to trigger the drop down list. I've tried three methods: angular.element(document.querySelector("#test1")).triggerHandler('click'); it works with...

Dynamic path for data-template in angular-strap bs-popover directive

angularjs,popover,angular-strap
I have used the angular-strap 'bs-popover' directive to open a popover using a custom html template. Following is the code sample which calls the directive when an input field is clicked. <div ng-controller="ctrl"> <input size="6" type="text" ng-model="cell.HHmm__c" data-template= "/projectA/v/d/views/popoverTemplate.html" data-animation="am-flip-x" bs-popover="popover"></input> </div> Everything is working fine. However, now I want...

Angular strap tabs doesn't open any tab on data reload

angularjs,tabs,angular-strap
I'm playing around with angular strap tabs and got into an issue where if I reload the data that the tabs are based on then none of the tabs are actually open. It just shows the top headers, but no data for any of them. If you click a tab...

Angular-strap data-trigger='focus' not working

javascript,html,angularjs,angular-strap
the data-trigger focus is not working for me ... <span data-content='foo' data-html='true' data-placement='top' data-container='body' data-trigger='focus' bs-popover> Nothing is actually happening when I am clicking on this element. If I remove data-trigger='focus' and set it to hover or click, it does work. I am using angularjs. 1.2.18 and angular-strap : 2.2.4...

Angular JS factory vs service vs provider by example

javascript,angularjs,angular-strap
I know this question has been asked and answers have been given. But I learn best through practical examples and I came across code that I didn't fully understand. I'm referring to Angular Strap which is an awesome set of directives for cool user interactions: http://mgcrea.github.io/angular-strap/ I was looking at...