I use AngularJS and I have the following template_
<div class="wrapper">
<div class="as-container">
<div ui-view="header"></div>
<div class="apoSoftContainer">
<div class="row clearfix">
<div class="col-md-12 column" ui-view="content"></div>
</div>
</div>
</div>
<div class="as-footer">
<div ui-view="footer"></div>
</div>
</div>
A span- Tag in my Footer looks like this:
</span> Version <span style="font-weight:normal;">Some Text</span></span>
There is no controller or service for the footer.
My aim is that when I click onto "Some Text" than a modal should be open but I don't know where to place the code?
If you already got the code to open a modal, I suggest you create a controller for it.
I usually wrap my entire application using a "mainController". That way, I can use it for head elements, footer, etc.
<!DOCTYPE html>
<html ng-app="WebApp" ng-controller="mainController as main">
<head>
<title>{{main.myTitle}}</title>
</head>
</body>
<footer>
<span ng-click="main.openModal()">Click here!</span>
</footer>
</body>
</html>
Related
Here's a plunk I've been working on for another question. I'm not sure what I'm doing wrong, but I see the bootstrap examples (plunk), and they look like this:
While mine looks like this (specifically look at the panel-headings / panel-titles):
My panel-heading has no styling at all, even though we're using practically the same code:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<body ng-controller="MainCtrl">
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-header">
<h4 class="panel-title" uib-tooltip="ok">ui-grid tester</h4>
</div>
<div class="panel-body">
<button ng-click="changeColumn2Text()">Change Column 2 Text</button>
<br />
<br />
<div class="grid" ui-grid="gridOptions" ui-grid-selection=""></div>
</div>
</div>
</div>
</body>
The only difference is their panel is in a template (on the same page, with no special styles or classes) to use for an accordion, which doesn't seem to me like it should affect the styling.
So what am I doing wrong?
change panel-header with panel-heading class
I have a next and previous button on footer which is on index.html file. My code structure is as below-
<html ng-app="myapp">
<body ng-controller="myController">
<div id="header">Header</div>
<div id="content"><ng-view></ng-view></div>
<div id="footer">
<button type="button" id="next" ng-click="nextPage()">Next</button>
<button type="button" id="prev" ng-click="prevPage()">Previous</button>
</div>
</body>
</html>
On click of Next and previous button, my page content should redirect to new view in the content. I have used ui-view to redirect to different view.
But in controller part it only redirect to 1.html page. After again when I click it does not redirect to 2.html page
I need to redirect to different page(1.html,2.html,3.html,4.html) on click of each next button.
Please let me know how it can be possible.
There is also an issue with your code. Since you are using ui.router, any interaction with the $stateProvider and $states need to happen using the ui-view directive but you have used ng-view and so your code won't work. Change it as below:
<html ng-app="myapp">
<body ng-controller="myController">
<div id="header">Header</div>
<div id="content">
<ui-view></ui-view>
</div>
<div id="footer">
<button type="button" id="next" ng-click="nextPage()">Next</button>
<button type="button" id="prev" ng-click="prevPage()">Previous</button>
</div>
</body>
</html>
You can do it using angular $location.
<html ng-app="myapp">
<body ng-controller="myController">
<div id="header">Header</div>
<div id="content"><ng-view></ng-view></div>
<div id="footer">
<button type="button" id="next" ng-click="go('/NextPageUrl')">Next</button>
<button type="button" id="prev" ng-click="go('/PrevPageUrl')">Previous</button>
</div>
</body>
</html>
In controller:
$scope.go = function ( path ) {
$location.path( path );
};
Im doing an ionic hybrid app an i have a problem with the modal
when i invoke the modal.show() method i see the blackdropdown but not the actual modal content (i copy pasted the example from the docs).
inspecting the modal object in chrome i see its well instanciated.
I think its related to my project setting so ill copy them here
index.html (placeholder)
<body ng-app="myApp">
<ion-pane>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
</ion-pane>
</body>
the page that holds the button to invoke the modal
<ion-view class="backGround-clouds">
<ion-header-bar class="transparent" ng-controller="MenuController" align-title="center" style="margin-top:10px;">
<div class="buttons" style="margin-top:20px;">
<button class="button header-right-decor" ng-click="returnToLastView()"><i class="ion-person" style="font-size:2em;"></i></button>
<h1 class="title" style="height:65px;"><img src="img/new/logo.png"/></h1>
</div>
</ion-header-bar>
<ion-content style="margin-top:75px;">
<div id="errors" class="center" style="color:red;text-align:center;">
<ul>
<li ng-repeat="error in errors">{{error}}</li>
</ul>
</div>
<div class="center login-title">Transactions List</div>
<div class="row">
<div class="col">Date</div>
<div class="col">Transaction</div>
<div class="col">Amount</div>
<div class="col"></div>
</div>
<div class="row" style="margin:0px;" ng-repeat="transaction in transactions">
<div class="col">{{transaction.Date | date:"MM/dd/yy"}}</div>
<div class="col">{{transaction.ProPayID}}</div>
<div class="col">${{transaction.Amount}}</div>
<div class="col"><button class="button-transaction" ng-click="openTransactionDetail(1)">Detail</button></div>
</div>
</ion-content>
</ion-view>
and lastly my simple modal.html
<div class="modal">
<header class="bar bar-header bar-positive">
<h1 class="title">Sample Modal</h1>
</header>
<ion-content has-header="true" padding="true">
<p ng-repeat="data in boulderDataChanges">{{data}}</p>
<button class="button" ng-click="fakeLogin()">Fake Login</button>
</ion-content>
</div>
As mentioned the controller is invoking it correctly but the view just shows black curtain without the modal markup
turns out that the problem was that i have a bootstrap css in my project and it killed the ionic modal css
when i removed this line from my index
<link href="css/bootstrap.min.css" rel="stylesheet">
it worked like a charm
btw reason im using this css is because im using the angular date picker widget
if your index.html file contain
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
remove it.then it will work.
edit
this happens because of .model class in bootstrap.css set eliment on display:none
so you can simply modify bootstrap (just remove models).
http://getbootstrap.com/customize/?id=e025f1d7d08b43d76509f61bb1bf24d0
If you want to keep bootstrap unmodifed just add in this extra css rule to your project and this will fix the black background problem:
.modal-wrapper .modal { display:block; }
I am trying to have a single-page Angular-App which has a view in the middle and tools like sidebar and topbar around that. But when the user is not logged in, the view should show a login partial and the side- and topbar should be hidden. As well as there should be a fullscreen background image. I got a working attempt, but it's rather ugly, so I wonder how I could do better:
<body ng-app ="MB">
<div ng-controller="mbMainCtrl as mainCtrl" class="container-fluid">
<!--fullscreen background when not logged in-->
<div ng-hide="$root.loggedIn" class="landing" ng-cloak>
</div>
<div>
<div ng-show="$root.loggedIn" class="row">
<mb-topbar></mb-topbar>
</div>
<div class="row">
<div ng-show="$root.loggedIn" class="col-sm-1">
</div>
<div ng-show="$root.loggedIn" class="col-xs-12 col-sm-2">
<mb-sidebar></mb-sidebar>
</div>
<!--view always visible, loads the login page as well-->
<div class = "col-sm-6">
<div ng-view></div>
</div>
<div ng-show="$root.loggedIn" class="col-xs-12 col-sm-2">
<div class="row">
<div mb-news-feed-dir></div>
</div>
<div class="row">
<div mb-quest-feed-dir></div>
</div>
</div>
<div ng-show="$root.loggedIn" class="col-sm-1">
</div>
</div>
</div>
</div>
...
</body>
I suggest you use ui-router and have a nested view to accomplish something like this in a more clean way without having to hide and show dom elements.
How should i implement this:
4 tabs which open onclick and loads a view in to a child.
Tried with 4 ng-view tags and hiding 3 of them but it doesn't feel right. How should I display my content in the right tab?
<section id="tabs">
<div class="tab open">
<div ng-view></div>
</div>
<div class="tab">
<div ng-view></div>
</div>
<div class="tab">
<div ng-view></div>
</div>
<div class="tab">
<div ng-view></div>
</div>
</section>
you should use bootstrap for a tabs and ng-include for a content
something like this
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="http://code.angularjs.org/1.2.12/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.12/angular-cookies.min.js"></script>
<script src="http://code.angularjs.org/1.2.12/angular-route.min.js"></script>
<script src="http://code.angularjs.org/1.2.12/angular-resource.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
</head>
<body>
<div class="container">
<!-------->
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Red</li>
<li>Orange</li>
<li>Yellow</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<div ng-include src="'red.html'"></div>
</div>
<div class="tab-pane" id="orange">
<div ng-include src="'orange.html'"></div>
</div>
<div class="tab-pane" id="yellow">
<div ng-include src="'yellow.html'"></div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#tabs').tab();
});
</script>
</div> <!-- container -->
<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>
Angular UI bootstrap module has all the twitter bootstrap components ported as angular modules. You should be using it instead of reinventing it (unless you cannot/dont want to use twitter bootstrap).
tldr: Try using bootstraps tabs component from angular UI bootstrap