The issue is that my tooltip is shown on the bottom left part of my button when I hover on the botton for the first time. Then it seems it fixes its position and works as expected. This happens in all desktop browsers. I am using v0.9.8.
I have used that example
https://material.angularjs.org/0.9.8/#/demo/material.components.tooltip
Here is the html
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/styles/angular-material.css" />
<link rel="stylesheet" href="assets/styles/style.css" />
<link rel="stylesheet" href="assets/styles/material-design-iconic-font.css" />
</head>
<body layout="column" ng-app="myApp">
<md-toolbar class="md-accent">
<h2 class="md-toolbar-tools">
<span flex="">Awesome Md App</span>
<md-button class="md-fab md-accent" aria-label="refresh">
<md-tooltip>
Refresh
</md-tooltip>
<md-icon md-svg-src="img/icons/ic_refresh_24px.svg" style="width: 24px; height: 24px;">
</md-icon>
</md-button>
</h2>
</md-toolbar>
<div flex layout="row">
<!--main content-->
</div>
</body>
<!-- vendor -->
<script src="assets/javascript/vendor/jquery-2.1.3.min.js"></script>
<script src="assets/javascript/vendor/angular.js"></script>
<script src="assets/javascript/vendor/angular-route.js"></script>
<script src="assets/javascript/vendor/angular-animate.js"></script>
<script src="assets/javascript/vendor/angular-aria.js"></script>
<script src="assets/javascript/vendor/angular-material.js"></script>
</html>
If I remove the flex attribute
<span flex="">Awesome Md App</span>
The controls are disordered but the tooltip appears just fine. What could be the problem?
Remove layout="column" from yr body tag.
<body layout="column" ng-app="myApp">
<body ng-app="myApp">
you should place yr main content inside md-content & then give layout="column" or "row" as required.
<md-content flex layout="column">
<!--main content-->
<span>above</span>
<span>below</span>
</md-content>
or
<md-content flex layout="row">
<!--main content-->
<span flex>i'm left</span>
<span flex>i'm right</span>
</md-content>
Related
I've been scratching my head to make a Bootstrap Carousel with AngularJS inside a Node-Red Dashboard template node. I have even found several tips here, but the presented solutions are not working for me... here is the complete code inside Node-Red dashboard template: (any help is much appretiatted!)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Spotify UI</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<md-content>
<md-tabs md-dynamic-height md-border-bottom>
<md-tab md-on-select="send({getFeatured: true})" ng-click="send({getFeatured: true})">
<md-tab-label><md-icon ng-md-icon icon="stars" style="fill: LIGHTGREEN"></md-icon></md-tab-label>
<md-tab-body>
<md-content>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item" ng-class="{active:!$index}" ng-repeat="item in featured track by $index">
<img class="d-block w-100" src="{{item.images[0].url}}" alt="missing">
<p>{{$index}}</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</md-content>
</md-tab-body>
</md-tab>
</md-tabs>
</md-content>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
(function(scope) {
scope.$watch('msg', function(msg) {
if (msg.payload.playlists.items) {
scope.featured = msg.payload.playlists.items;
};
});
})(scope);
</script>
</body>
</html>
Update 01.10.2018 - I finally managed to make it work after changing the class from class="item"to class="carousel-item".
I'm in trouble using together Thymeleaf and AngularJS. I try to sidenav menu with angular and I'm following this tutorial. I did same on the link but Thymeleaf throws this exception:
Caused by: org.xml.sax.SAXParseException: Attribute name "flex" associated with an element type "section" must be followed by the ' = ' character.
Here is the html:
<!DOCTYPE html>
<html ng-app="app" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="webjars/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="webjars/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script type="text/javascript" src="webjars/angularjs/1.5.5/angular.js"></script>
<script type="text/javascript" src="webjars/angularjs/1.5.5/angular-route.js"></script>
<script type="text/javascript" src="webjars/angularjs/1.5.5/angular-resource.js"></script>
<script type="text/javascript" src="webjars/angularjs/1.5.5/angular-animate.js"></script>
<script type="text/javascript" src="webjars/angularjs/1.5.5/angular-aria.js"></script>
<script type="text/javascript" src="webjars/angular-material/1.1.0/angular-material.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/tokenInterceptorService.js"></script>
<script type="text/javascript" src="js/navigation.js"></script>
<script type="text/javascript" src="js/sidenav.js"></script>
<title>Title</title>
</head>
<body ng-controller="navigation">
<div ng-controller="SideNavCtrl" layout="column" style="height: 500px;" data-ng-cloak="">
<section layout="row" flex>
<md-sidenav class="md-sidenav-left" md-component-id="left" md-disable-backdrop md-whiteframe="4">
<md-toolbar class="md-theme-indigo">
<h1 class="md-toolbar-tools">Disabled Backdrop</h1>
</md-toolbar>
<md-content layout-margin>
<p>
This sidenav is not showing any backdrop, where users can click on it, to close the sidenav.
</p>
<md-button ng-click="toggleLeft()" class="md-accent">
Close this Sidenav
</md-button>
</md-content>
</md-sidenav>
<md-content flex layout-padding>
<div layout="column" layout-align="top center">
<p>
Developers can also disable the backdrop of the sidenav.<br/>
This will disable the functionality to click outside to close the sidenav.
</p>
<div>
<md-button ng-click="toggleLeft()" class="md-raised">
Toggle Sidenav
</md-button>
</div>
</div>
</md-content>
</section>
</div>
</html>
What is the problem? Does Theymeleaf want a parameter like flex="..."?
Yes, usually attributes like that are specified: flex="flex".
I am trying to get a small angular app up and running but am receiving the same error every time I load my app:
Error: $injector:modulerr
Module Error
Failed to instantiate module app due to:
Error: [$injector:unpr]
http://errors.angularjs.org/1.6.5/$injector/unpr?p0=%24scope
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:7:76
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:46:65
at d (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:43:280)
at e (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:44:6)
at Object.invoke (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:44:91)
at d (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:42:237)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:42:376
at p (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:8:7)
at g (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:42:138)
at gb (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:46:251
Here is a snippet with my index.html file and my app.js file:
var app = angular.module('app', []);
app.service('languageService', function($resource){
});
app.config(function($scope){
$scope.submit = function() {
console.log("yay");
}
});
<html lang="en" ng-app="app" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WIT</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="images/computer.ico"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="container">
<div class="row">
<h1><span class="glyphicon glyphicon-pencil"></span>RecommendHer</h1>
</div>
</br>
</br>
<div class="row">
<div class="col-xs-12">
<p>Please paste job description below:</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<textarea ng-model="jobDescription"></textarea>
</div>
</div>
</br>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default" ng-click="submit()">Submit</button>
</div>
</div>
</div>
<div ng-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="app.js"></script>
<script src="services/languageService.js"></script>
</body>
</html>
Please let me know if any other information would be helpful! Thank you.
You cannot inject $scope to config. $scope is only accessible in controller and directive.
I think you are looking for controller?
app.controller('yourCtrl', function($scope){
// your code
});
var app = angular.module('app', []);
app.service('languageService', function($resource){
});
app.config(function(){
});
<html lang="en" ng-app="app" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WIT</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="images/computer.ico"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="container">
<div class="row">
<h1><span class="glyphicon glyphicon-pencil"></span>RecommendHer</h1>
</div>
</br>
</br>
<div class="row">
<div class="col-xs-12">
<p>Please paste job description below:</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<textarea ng-model="jobDescription"></textarea>
</div>
</div>
</br>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default" ng-click="submit()">Submit</button>
</div>
</div>
</div>
<div ng-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="app.js"></script>
<script src="services/languageService.js"></script>
</body>
</html>
I have made a simple registration page with angularJS-materials, my issue is a select tag which is properly working over windows, android phones except iPhone's safari.
So can anyone help me about this!
That's my code below:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="ISO-8859-1" name="viewport" content="width=device-width, initial-scale=1">
<title>Form | angularJs</title>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css">
<link rel="stylesheet" href="https://material.angularjs.org/1.1.3/docs.css">
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="w3.css">
<script src="query.js">
</script>
</head>
<body>
<header class="w3-container w3-teal">
<h1><center>School.com</center></h1>
</header>
<div class="container">
<div class="well ng-scope" ui-view="content">
<div ng-controller="ContactController">
<div class="row">
<form class="well" name="myForm">
<md-input-container class="md-block" flex-gt-sm>
<label>State</label>
<md-select ng-model="State" name="state" placeholder="Select State" style="text-indent: 6px; line-height: 30px;">
<md-option value="pune">Pune</md-option>
<md-option value="mumbai">Mumbai</md-option>
<md-option value="nagpur">Nagpur</md-option>
<md-option value="nashik">Nashik</md-option>
</md-select>
<div ng-messages="myForm.state.$error"
ng-show="myForm.state.$dirty">
<div ng-message="required">This is required!</div>
</div>
</md-input-container>
<br />
<input type="hidden" ng-model="newcontact.id" />
<md-button ng-disabled="(myForm.$invalid)&& action != 'VIEW'" ng-click="saveContact()" class="md-raised md-primary">Submit</md-button>
<md-button type="reset" class=" md-warn md-raised md-hue-2">Reset</md-button>
</form>
</div>
</div>
</div>
</div>
</div>
<footer class="w3-container w3-teal">
<h5><center>Copyright © School.com</center></h5>
</footer>
</body>
</html>
There is no problem with code, just need to update this meta tag. Thats it!
I'm trying to use mobile-angular-ui (http://mobileangularui.com/) sidebar menu in Angular-Seed(https://github.com/angular/angular-seed) index-async.html.
I followed description, npm install and npm run update-index-async to setup index and index-async pages. The sidebar is working on index, but not in index-async
The Sidebar menu is working well for index.html.
<!DOCTYPE html>
<!--[if lt IE 7]>
<html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-hover.css">
<link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-base.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body ng-cloak ui-prevent-touchmove-defaults>
<!-- Sidebars -->
<div ng-include="'Shared/menu.html'" id="leftMenu" class="sidebar sidebar-left black-bg"></div>
<div class="app">
<div class="navbar navbar-app navbar-absolute-top">
<div class="btn-group pull-left">
<a href ui-toggle="leftMenu" class="btn" id="btn-menu">
<i class="fa fa-bars"></i> Menu
</a>
</div>
<div class="navbar-brand navbar-brand-center" ui-yield-to="title">
APP
<small>v<span app-version></span></small>
</div>
</div>
<!-- App body -->
<div class="app-body scrollable">
<div class="app-content scrollable-content">
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
But the sidebar menu is not working for index-async.html. I tried npm run update-index-async and npm install scriptjs. They all didn't work.
Here is my index-async code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<style>
[ng-cloak] {
display: none;
}
</style>
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-hover.css">
<link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-base.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="bower_components/angular-loader/angular-loader.js"></script>
<script src="bower_components/scriptjs/dist/script.js"></script>
<script>
// load all of the dependencies asynchronously.
$script('bower_components/angular/angular.js', function () {
$script([
'bower_components/angular-route/angular-route.js',
'bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.js',
'app.js',
'view1/view1.js',
'view2/view2.js',
'components/version/version.js',
'components/version/version-directive.js',
'components/version/interpolate-filter.js'
], function () {
// when all is done, execute bootstrap angular application
angular.bootstrap(document, ['myApp']);
});
})
</script>
<title>My AngularJS App</title>
<link rel="stylesheet" href="app.css">
</head>
<body ng-cloak ui-prevent-touchmove-defaults>
<!-- Sidebars -->
<div ng-include="'Shared/menu.html'" id="leftMenu" class="sidebar sidebar-left black-bg"></div>
<div class="app">
<div class="navbar navbar-app navbar-absolute-top">
<div class="btn-group pull-left">
<a href ui-toggle="leftMenu" class="btn" id="btn-menu">
<i class="fa fa-bars"></i> Menu
</a>
</div>
<div class="navbar-brand navbar-brand-center" ui-yield-to="title">
APP
<small>v<span app-version></span></small>
</div>
</div>
<!-- App body -->
<div class="app-body scrollable">
<div class="app-content scrollable-content">
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>
</body>
</html>