I have an app that has multipe .html pages instead of 1 page which holds all the pages. I am trying to use ons.navigator.pushPage("path/to/page.html", {foo: "bar"}); but it doesnt work
However, doing this works:
<p align="center"><ons-tabbar-item page="activity.html" should-spin="false"><ons-button modifier="large--cta">view</ons-button></ons-tabbar-item></p>
But this doesnt work:
<p align="center"><ons-button modifier="large--cta" ng-click="ons.navigator.pushPage('activity.html', {foo: 'bar'})">view</ons-button></p>
timeline.html
<ons-page ng-controller="CircularActivity">
<div style="text-align: center" >
<ons-row style="margin-top: 0px; padding:20px;text-align: center;">
<ons-col >
<p> Test History</p>
<ul ng-if="corttimeline.length" class="cbp_tmtimeline">
<li ng-repeat="cortisolx in corttimeline" ng-show="corttimeline.length" style="margin-left:0px;padding-left:10px; list-style:none;border-bottom:1px solid #e3e3e3;padding-top:15px;padding-bottom:15px;color:#333;font-size:12px">
<time class="cbp_tmtime" datetime="2013-04-10 18:30"> <span style="color:#b6b6b6">{{cortisolx.date_created_2 || ""}}</span> <span>{{cortisolx.day_name || "" }}</span></time>
<!--<div class="cbp_tmicon"><ons-icon icon="ion-android-open" fixed-width="false" style="vertical-align: -4px;color:#fff"></ons-icon></div>-->
<div class="cbp_tmlabel" ng-click=" ons.screen.presentPage( activity.html, { animation: 'fade' });">
<h2>{{cortisolx.cortisol || "0" }} <span style="font-size:12px;color:#555"> ng/ml</span></h2>
<p align="center"><ons-tabbar-item page="activity.html" should-spin="false"><ons-button modifier="large--cta">view</ons-button></ons-tabbar-item></p>
</div>
</li>
</ul>
</ons-col>
</ons-row>
</div>
</ons-page>
Index.html:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' https://*.googleapis.com https://*.cloudflare.com 'unsafe-inline'; script-src 'self' http://*.phonegap.com https://*.googleapis.com https://*.cloudflare.com http://*.elasticbeanstalk.com https://*.monaca.mobi:8080 'unsafe-inline' 'unsafe-eval'">
<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<script src="components/loader.js"></script>
<script src="js/roundProgress.js"></script>
<script>
var app = ons.bootstrap('app', ['onsen','angular-svg-round-progress']);
</script>
<script src="js/jquery.js"></script>
<script src="js/cortisol.js"></script>
<script src="js/circular.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.sparkline.min.js"></script>
</head>
<body>
<ons-page>
<ons-tabbar position="top" >
<ons-tabbar-item page="dashboard.html" style="margin-top:20px"><span style="margin-top:20px"><img src="img/icon.svg" width="34"/></span></ons-tabbar-item>
<ons-tabbar-item page="dashboard.html" icon="ion-ios-pulse-strong" active="true" class="tab-bar__button tab-bar--top-border__button"></ons-tabbar-item>
<ons-tabbar-item page="timeline.html" icon="ion-android-calendar"></ons-tabbar-item>
<ons-tabbar-item page="capture.html" icon="ion-pinpoint"></ons-tabbar-item>
<ons-tabbar-item page="settings.html" icon="ion-android-settings"></ons-tabbar-item>
</ons-tabbar>
</ons-page>
</body>
</html>
Related
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>
This is asked and answered many times already.
But, after trying many things, I still have this problem.
I have single page with a search button in Angular. The parameter is getting trough fine and logged like this console.log("searched: " + search.term);
Then I use this term to query my database using REST, the result is coming back fine. All good!
Now, I'd like to update the $scope data with these new results. I have treid to do that by adding $scope.$apply() and by using $timeout and by using $digest.
It all leads me to the error: $digest already in progress
Then I used $scope.$watch and that works, I tested it with alerts but the data never ever changes in my browser.
'use strict';
// Declare app level module which depends on views, and components
angular.module('Grep GUI', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/view1'});
}]).
controller('DataBeest', function($scope, $http) {
$http.get('http://localhost:8529/_db/grep/grepdata/huizen').
then(function(response) {
$scope.greeting = response.data;
});
$scope.search = function(search) {
console.log("searched: " + search.term);
$http.get('http://localhost:8529/_db/grep/zoek/zoek/' + search.term).
then(function(response) {
$scope.greeting = response.data;
$scope.$digest()
});
}
});
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="grep GUI" 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="/" title="grep Crawler">/Grand Theft grep</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>/alle_data</li>
<li>/alle_plaatjes</li>
<li>/nog_wat</li>
</ul>
<div class="col-sm-3 col-md-3 pull-right" ng-controller="DataBeest">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Zoek" name="srch-term" id="srch-term" ng-model="search.term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="search(search)"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="container" ng-controller="DataBeest">
{{ greeting }}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.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>
ok found it, I had re-used the controller in the view, this made it all wonky..
I have been working around onsen-ui recently and got stuck when I was trying to reference a Carrousel var (var="carousel") within a Tabbar and Navigator components.
The code works until I try to use Tabs. I get the following error:
Uncaught (in promise) TypeError: Cannot read property of undefined
I have tired the ‘pageinit’ solution but it doesn’t seem to work.
Here under the HTML.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
<link rel="stylesheet" href="css/style.css">
<script src="lib/onsen/js/angular/angular.min.js"></script>
<script src="lib/onsen/js/onsenui.min.js"></script>
<script src="lib/onsen/js/angular-onsenui.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="AppCtrl">
<ons-tabbar>
<ons-tab page="home.html" active="true">
<ons-icon icon="ion-home"></ons-icon>
<span style="font-size: 14px">Home</span>
</ons-tab>
</ons-tabbar>
<ons-template id="home.html">
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Carousel</div>
</ons-toolbar>
<ons-carousel ng-controller="carouselCtrl" swipeable overscrollable auto-scroll fullscreen var="carousel">
<ons-carousel-item style="background-color: gray;" id="carouselWho">
<div class="item-label">1</div>
</ons-carousel-item>
<ons-carousel-item style="background-color: #D38312;" id="carouselWhere">
<div class="item-label">2</div>
</ons-carousel-item>
<ons-carousel-cover>
<div class="cover-label">
<ons-icon icon="ion-ios-home" size="20px" fixed-width="true" ng-class="{'custom-icon': iconIndex == 'carouselWho'}"></ons-icon>
<ons-icon icon="ion-ios-location" size="20px" fixed-width="true" ng-class="{'custom-icon': iconIndex == 'carouselWhere'}"></ons-icon>
</div>
</ons-carousel-cover>
</ons-carousel>
</ons-page>
</ons-navigator>
</ons-template>
</body>
</html>
And app.js
var module = ons.bootstrap('my-app', ['onsen']);
module.controller('AppCtrl',['$scope', function($scope) {
}]);
module.controller('carouselCtrl',['$scope', function($scope) {
ons.ready(function() {
$scope.iconIndex = $scope.carousel._attrs.$$element[0].children[$scope.carousel.getActiveIndex()].id;
$scope.$apply();
$scope.carousel.on('postchange', function (event) {
$scope.iconIndex = $scope.carousel._attrs.$$element[0].children[$scope.carousel.getActiveIndex()].id;
$scope.$apply()
});
});
}]);
Do you have any idea where the issue comes from?
Many thanks for your time.
I added a tab to your HTML and put it on codepen. It seems to work? Can you specify what happens when you get the error?
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
</head>
<body ng-controller="AppCtrl">
<ons-tabbar>
<ons-tab page="home.html" active="true">
<ons-icon icon="ion-home"></ons-icon>
<span style="font-size: 14px">Home</span>
</ons-tab>
<ons-tab page="home2.html" active="true">
<ons-icon icon="ion-home"></ons-icon>
<span style="font-size: 14px">Home</span>
</ons-tab>
</ons-tabbar>
<ons-template id="home.html">
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Carousel</div>
</ons-toolbar>
<ons-carousel ng-controller="carouselCtrl" swipeable overscrollable auto-scroll fullscreen var="carousel">
<ons-carousel-item style="background-color: gray;" id="carouselWho">
<div class="item-label">1</div>
</ons-carousel-item>
<ons-carousel-item style="background-color: #D38312;" id="carouselWhere">
<div class="item-label">2</div>
</ons-carousel-item>
<ons-carousel-cover>
<div class="cover-label">
<ons-icon icon="ion-ios-home" size="20px" fixed-width="true" ng-class="{'custom-icon': iconIndex == 'carouselWho'}"></ons-icon>
<ons-icon icon="ion-ios-location" size="20px" fixed-width="true" ng-class="{'custom-icon': iconIndex == 'carouselWhere'}"></ons-icon>
</div>
</ons-carousel-cover>
</ons-carousel>
</ons-page>
</ons-navigator>
</ons-template>
<ons-template id="home2.html">
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Carousel</div>
</ons-toolbar>
<ons-carousel ng-controller="carouselCtrl" swipeable overscrollable auto-scroll fullscreen var="carousel">
<ons-carousel-item style="background-color: gray;" id="carouselWho">
<div class="item-label">3</div>
</ons-carousel-item>
<ons-carousel-item style="background-color: #D38312;" id="carouselWhere">
<div class="item-label">4</div>
</ons-carousel-item>
<ons-carousel-cover>
<div class="cover-label">
<ons-icon icon="ion-ios-home" size="20px" fixed-width="true" ng-class="{'custom-icon': iconIndex == 'carouselWho'}"></ons-icon>
<ons-icon icon="ion-ios-location" size="20px" fixed-width="true" ng-class="{'custom-icon': iconIndex == 'carouselWhere'}"></ons-icon>
</div>
</ons-carousel-cover>
</ons-carousel>
</ons-page>
</ons-navigator>
</ons-template>
</body>
</html>
https://codepen.io/grailly/pen/wWLavb?&editors=101
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>
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>