AngularJS Material: Material Design component library for AngularJS (1.x). Use angular/material2 channel for Angular Material (v2+).
Hi there i am trying to implement a popup custom dialog box but i am unable to implement it please help . I am getting this error
Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/saurabh/Desktop/tp_work/dialog1.tmpl.html'.
Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/saurabh/Desktop/tp_work/dialog1.tmpl.html'.
XMLHttpRequest cannot load file:///C:/Users/saurabh/Desktop/tp_work/dialog1.tmpl.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
$scope.pop = function(ev) {
$mdDialog.show({
controller: 'DialogController',
templateUrl: 'dialog1.tmpl.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true
})
.then(function(answer) {
$scope.status = 'You said the information was "' + answer + '".';
}, function() {
$scope.status = 'You cancelled the dialog.';
});
};
@SaurabhKad you’re trying to make an HTTP request on your file system (file://)
is there any alternative way to implement it like using ng-template ?
sorry i am beginner in this :)
I dont think so, even other mechanisms work with those requests. The solution is to set up a local webserver for this…
:)
@SaurabhKad but for now you can write that template inline if you like… instead of using templateUrl: ‘/path/to/file’ you can write template: ‘<html>YOUR MARKUP</html>'
for testing purposes… :)
Hello, is there a container similar to
md-list for md-card items? I am trying to build an interface similar to Google Now.
Hey all, I have a really strange issue with angular/material. Sometimes (not sure why/when) a/m will not load correctly on my page, and all of the directives/flexbox/etc will be broken, leading to something that looks bad and is horribly unusable. This happens in each browser.
For example with my sidebar, it doesn't extend all the way to the bottom: http://i.imgur.com/tsSHPwc.png -- also, "hi user" should be to the right of that.
I've tried loading from a CDN, not minifying it via gulp, doing all sorts of stuff -- it just sometimes breaks and sometimes doesn't, and I have no idea why. It makes development kinda terrible.
http://seiyria.com/openchallenge/ you can find it online here. the icons are supposed to be in 2 rows of 3 each, except when
sm. Plus, lots of other obvious bugs. I'm not sure if it's replicable for other people but I don't see why not.
@seiyria looks good to me on the landing page. any repro like CodePen that doesn’t require me to login?
@Splaktar unfortunately no, but you don't even have to log in to see the bad - it's right there on the home page too
homepage looks good to me. everything seems to be laid out properly
using Chrome
for me (in chrome) it's 1 column wide for the whole thing, instead of 2x3
I'm not sure if my build process is eating something, but I can't grok why this happens
I wonder if that's breaking it though
even pulling in angular-material CSS and JS via CDN is breaking? i see that you are concatonating it
I think you are way over doing it with putting layout on every element
and yeah - normally my build process works ok, but only for this project it's been acting up, and I've been unsure how to diagnose it
@Splaktar maybe, but honestly, it's been a while since I used a/m and I still don't fully get flexbox
You should be able to do
<div flex></div> in normal html too
I know I've done it that way before.
you may want to do layout=“row” and layout-wrap instead of swapping between row/column
yeah that’s fine
but if it's spitting it out as flex="flex" -- do you think that might be causing problems?
also, I'm not really sure how layout-wrap works.
there are surprisingly few demos of a/m
the project has quite a few others with grid-list and such
i’m not seeing flex or layout styles at all in your hosted version, i think your build is cutting the layout CSS out of the build
that's the thing though, there's no way it's doing that... I used to use uncss but it never worked right, so I just commented it out in my gulpfile
all it does is concat/minify
ok i see them in your CSS, but the browser isn’t finding them it seems like
however when I look at the css... I see
.md-css-only in there everywhere
anywhere I see flex styles, that's nearby
you can see the md-content styles, but not the layout column or layout-padding
on the right
yep. that's also been driving me nuts, none of the styles are showing up in the style explorer
flex styles don't show up there either
can someone please help me with this? http://stackoverflow.com/questions/32811128/error-parsesyntax-syntax-error
have you tried 0.11.0?
i think that will eliminate most of this issue with
md-css-only
your JS isn’t processing the layout attributes into class values
what could cause that to happen?
they shouldn’t show up in the browser as layout=“column”, it should be class=“layout-column"
maybe browserify is breaking something?
mm, that'd be kinda annoying - if that were the case I'd have to move all of my angular deps to bower so I can get the build process working in the right order
or, well, I guess I could just change the build process to hit these guys via npm and not use
import
I'll give it a go and let you know if it works again
is your build pulling in angular-aria and angular-animate?
those are required and i don’t see them in the imports
that didn't change anything though
it appears to be working... and it seems browserify is to blame
moved everything to one concat'd file, it works again
(all the libraries, that is)
thanks a ton @Splaktar - you saved my sanity
np, maybe just an ordering issue, but certainly something with the JS processing