angular/material

AngularJS Material: Material Design component library for AngularJS (1.x). Use angular/material2 channel for Angular Material (v2+).

adilogin15

@adilogin15

for example : I have assigned

$scope.showtacdialog = function(ev) {
           function showtacdialog() {
                $mdDialog.show({
                  templateUrl: 'terms-and-conditions',
                  parent: angular.element(document.body),
                  targetEvent: ev,
                  clickOutsideToClose:true
                });
              }
            };

I mean I have defined scope an url , and event , Is it the correct format , sorry just new to these things.

Patrick Finkbeiner

@pfinkbeiner

Well, I’m not quite sure but I think you must set templateUrl: 'terms-and-conditions.html’ otherwise you should notice an error in your browser console?!

adilogin15

@adilogin15

actually it is a handlebars file

I changed it to html . Problem is on clicking the link on my webpage , it gives a 500 error. I couldnt figure it out why .

adilogin15

@adilogin15

here is my code at frontend

 <md-checkbox flex="50" ng-model="signupInfo.termsAndConditions" required>
                I Agree to <a href="#" ng-click="showtacdialog($event)">Terms and Conditions</a>
            </md-checkbox>

i get
GET /terms-and-conditions.html 500 24.176 ms -

Jorge Cortes

@jcortes

Hello, everyone knows if it is possible to apply templates using md-tabs inside each md-tab?

Miloš Stanić

@MilosStanic

@adilogin15 you must put full path to terms-and-conditions.html, but relative to root of the webserver, i.e. your project root. The client is trying to get the file from the root dir, which is probably not allowed in .htaccess or something. I'm sure this is a file path issue

adilogin15

@adilogin15

if it was file path issue the error number should be 404

adilogin15

@adilogin15

I have kept full path for example I kept path app/views/pages/terms-and-conditions.html

now it is giving 404 error , which is due to faulty paths

BTW i dont need to give any path as both of them are in same folder

Patrick Finkbeiner

@pfinkbeiner

@jcortes Yes, I used ng-include but I had trouble with ui-view

adilogin15

@adilogin15

Any good source for learning angular backend services and controllers?

Miloš Stanić

@MilosStanic

@adilogin15 it really depends where you keep your partial htmls, and it depends on what and how serves them. In case of error 500, anything served from web root is forbidden, and that surely isn't the location of your html partial. You just have to see how your backend serves stuff.
And there is no such thing as angular backend services and controllers (yet). For now, Angular only plays in the client. So in the backend you must have some node.js+express or ruby or php thing

adilogin15

@adilogin15

node.js+express

Miloš Stanić

@MilosStanic

well, in that case, the path to your html partial may not be obvious, and may not relate to the actual path on the disk. I'm afraid I can't help you.

Simon Hilz

@DaHaiz

hey guys, i have a problem with body scroll disabling.

      // Converts the body to a position fixed block and translate it to the proper scroll
      // position
      function disableBodyScroll() {
        var htmlNode = body.parentNode;
        var restoreHtmlStyle = htmlNode.getAttribute('style') || '';
        var restoreBodyStyle = body.getAttribute('style') || '';
        var scrollOffset = $mdUtil.scrollTop(body);
        var clientWidth = body.clientWidth;

        if (body.scrollHeight > body.clientHeight) {
          applyStyles(body, {
            position: 'fixed',
            width: '100%',
            top: -scrollOffset + 'px'
          });

          applyStyles(htmlNode, {
            overflowY: 'scroll'
          });
        }

this results in that my body gets cut at the bottom by the value that is set to top. why do we have to set this negative value to top ? if i remove it, the content cut content does appear again

Simon Hilz

@DaHaiz

i could fix it using

applyStyles(body, {
            position: 'fixed',
            width: '100%',
            top: -scrollOffset + 'px',
            height: 'calc(100% + ' + scrollOffset + 'px)'
          });

any comments on that? is this the correct fix?

Anthony Fassett

@fassetar

Hey does anyone have an example on codepen of the sidenav with how it looks on the docs?

Laurent Grima

@laugri

Hello @fassetar, I just read an article about that this morning: http://brilliantbritz.com/2015/06/17/creating-your-own-angular-material-right-navigation-menu/

Patrick Finkbeiner

@pfinkbeiner

@LaurentGrima Pretty cool, thanks for sharing!

Laurent Grima

@laugri

I have my own question: does anyone know if menu items can be clicked without closing the menu they are in?

Laurent Grima

@laugri

Alright $event.stopPropagation() did the trick !

Anthony Fassett

@fassetar

Thanks @laugri! I'll check it out.

demetriusnunes

@demetriusnunes

Hi there, is there a way to disable/customize angular-material animations or at least the $mdDialog animations?

Kyle J. Kemp

@seiyria

is there a way to make an md-subheader work in a row-format? I have http://puu.sh/kw9dG/f3b0737b34.png but I want the Round stuff to be permanently showing at the top. however, because I have them in a div(layout="row") they don't actually stick because they're not direct descendants of md-content

Kyle J. Kemp

@seiyria

I managed to get them to at least try to stick - I made an md-list with only one entry (the stuff below) and an md-subheader... feels hacky, but it might work

apparently a/m doesn't like multiple stickies fighting all at once.. dreadful, heh

Michael Prentice

@Splaktar

@demetriusnunes I don't know of a way to disable them while keeping dialog functional programatically via an API. But I think that you could both disable and customize them by overriding the CSS.

David Verzolla

@dverzolla

There's any material angular, theme?

Karol

@emps

hii any docs for gridlist to sort stuff from right to left ? for rtl langs

James Strickland

@strickland84

Does anyone have some live examples of things they've built with Angular Material? Looking for some motivation! Thanks

Ken Egbuna

@kegbuna

have you looked at the angular-aio generator?

i think it uses material and it looks all right, it's just a seed project though

https://github.com/pinkyjie/generator-aio-angular#readme

James Strickland

@strickland84

@kegbuna thanks will check it out!

Anthony Fassett

@fassetar

@strickland84 http://trainapp.anthonyfassett.com/

James Strickland

@strickland84

@fassetar nice one, looks really good

Anthony Fassett

@fassetar

Thanks, still working on some parts but I'm trying to save myself work with the design when I make it an android app.

keplerk

@keplerk

Its just me or grid system is broken on chrome ? it doesn't re organize after window re sizing, it just overlap all the controls but it works on firefox.