Angular, using angular material switch in a bootstrap modal (aria label issue) - javascript

I am building angular app using angular, bootstrap, and angular-material. Specificlly I'm using bootstrap-ui for angular's modals - seend here http://angular-ui.github.io/bootstrap/. I have had no problems with angular-material until now, when I place the material switches in a bootstrap modal (in the template) I am getting an aria error and they are not working.
I'm using these switches (https://material.angularjs.org/#/demo/material.components.switch)
I just have it in the body of the modal like this to test it at first -
<div class="modal-body">
<md-switch ng-model="data" aria-label="Switch 1">
Switch 1
</md-switch>
</div>
The switches work fine outside of the modal but when I open the modal the console spits out the error like so (and the switch does not work) :
ARIA: Attribute " aria-label ", required for accessibility, is missing on node <div class="md-container" md-ink-ripple="" md-ink-ripple-checkbox=""><div class="md-off"></div><div class="md-on"></div></div>
I'm not sure what to do becasue there is an aria label on the switch itself, may because the boostrap ui makes a new controller for the modal itself, it's getting confused, or not getting the proper injections? Would appreciate any help. thanks for reading

Related

Angular : template changing depending on javascript value

I am building an angular app, with templates changing depending on with ngscope as seen on the samples below.
<label class="btn btn-default">
<input id="cacher" value="settings" type="radio" data-ng-model="user.status">Settings
</input>
</label>
and here i'm calling my html template userPageSettings
<div id="wrapper" ng-switch="user.status">
<div ng-switch-when="settings">
<user-page-settings></user-page-settings>
</div>
</div>
Trouble is, i'm trying to get access to the templates (and the correct route) through a dropdown in the navbar, which is supposed to do exactly the same thing as my normal menu. But if i simply call the templates from my navbar they will be shown on the current page, therefore at the incorrect route.
In my navbar code i'm doing the following, which is bringing me back to the correct route, but showing me my default template (aka home, not shown here, but called through the same method and has the number 6)
<li role="menuitem">Settings</li>
The number "1" (and the others using 2,3 etc) are hashed in my javascript and put into a variable. I would like to make my templates appear depending on those numbers.
Any ideas how ??
:) Thank you !!

angular material theme issue with setDefaultTheme method?

I build one web app with angular material. Initially i started working on only one theme. later my requirements is changed to use other theme in some UI components. When i'm trying to apply new theme i.e. "lime". But it's apply for toolbar.
The issue is with $mdThemingProvider.setDefaultTheme('indigo');
If i remove the setDefaultTheme method it's working, But for that i need to change more code in existing files.
I need work around for with the default method and use other theme.
here is my code.
I think you missed the watch tag in your code
$mdThemingProvider.alwaysWatchTheme(true);
You have to add md-theme-watch in your template as well.
<div>
<md-button ng-click="dynamicTheme = 'default'">Default</md-button>
<md-button ng-click="dynamicTheme = 'altTheme'">altTheme</md-button>
<div md-theme="{{ dynamicTheme }}" md-theme-watch>
<md-button class="md-primary">I'm dynamic</md-button>
</div>
</div>
I've updated your plunker
http://plnkr.co/edit/dEIGT3y1l85TOH1bKdMD?p=preview
You can read the documentation here
https://material.angularjs.org/latest/Theming/04_multiple_themes

Angular-ui bootstrap don't work correctly with templates

I use angular-ui-bootstrap popover. I manually changed template of popover to support html in it. I changed ng-bind to ng-bind-html:
<div class=\"popover-content\" ng-bind-html=\"content\"></div>
I'm passing such template to popover attribute:
<span ng-click="scopeFunction()">{{somethingFromScope}}</span>
So {{somethingFromScope}} resolves and works, but ng-click function doesn't work. ng-show, ng-if (looks like any ng- directive) don't work as well.
What's the reason of it? How can I make it work?
Thanks
Just changing template is not enough
Update module dependencies like this:
angular.module('ui.bootstrap.popover', ['ui.bootstrap.tooltip', 'ui.bootstrap.bindHtml'])
And change template
<div class="popover-content" bind-html-unsafe="content"></div>
Works with angular.ui.bootstrap v0.11.0 from 2014-05-01
After researching a lot I find a solution:
If you need popover with template - use AngularStrap popover ;)

How can I not have the initial HTML template rendered when using a PhoneJS dx-gallery widget and a template?

I am experimenting with the AngularJS approach for PhoneJS. So far I am really enjoying both frameworks.
Current issues:
Using a dx-gallery or dx-list with a datasource and a template will cause the initial un-bound template to be rendered when the view is navigated.
I found this out once I started using the dx-gallery widget and specifying a template. The console will show a network request for the initial template (not bound) being requested.
Code
<div dx-gallery="{ dataSource: imagesDataSource, height:'60%' }">
<div data-options="dxTemplate: { name: 'item' }">
<img src="http://somehostingcompany.com/{{public_id}}.jpg">
</div>
Question:
How can I not have the initial HTML template rendered when using a PhoneJS dx-gallery widget and a template?
Use ns-src binding instead of specifing src directly:
<img ng-src="http://somehostingcompany.com/{{public_id}}.jpg" />
Check out link https://docs.angularjs.org/api/ng/directive/ngSrc

scope issue caused ng-click don't trigger

I uses angular ui tab (http://angular-ui.github.io/bootstrap/) and I added a delete btn inside the the js file. I can't do it with my markup because the js generate the template on the js side.
my ng-click doesn't work when I put this
<span ng-click="deleteTab()" >dlt</span>
js
$scope.deleteTab = function(){
//$scope.tabs.splice(this, 1);
alert('d');
}
within my controller. I tried to include the js on the topest and before the , nothing work. Until I try onClick. I wonder why I can't use ng-click in my situation?
If you add new HTML to the DOM without using angular, you need to $compile the HTML to let angular to bind the content and $watch changes. See the docs
$compile(element.contents())(scope);
Edit:-
Ah you can give the title as a HTML template as well,see the tabs definition
<tab ng-repeat="workspace in workspaces"
active=workspace.active>
<tab-heading>{{workspace.name}}<span ng-click="deleteTab()" >dlt</span></tab-heading>
<div ng-controller="TabsChildController" >
<div>
{{workspace.id}} : {{ workspace.name}}
</div>
<input type="text" ng-model="workspace.name"/>
</div>
</tab>
and here is the solution
that's a plunker that could solve your problem.plunker the only doubt is what workspace would you want to close, i imagine it is the last, otherwise you only need to modify the delete method.
EDIT
in this version you can delete the selected workspace, you have to controll the css, but i thin it could be a good solution
new plunker

Categories