AngularJs ui.bootstrap issues - collapse not working - javascript

I am trying to make ui.bootstrap module work in Angularjs application.
Here is the code snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learn Angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body>
<div class="container" ng-app="uiApp" ng-controller="uiController">
<a href="#" class="btn btn-primary" ng-click="isCollapsed = !isCollapsed">
Toggle Panel
</a>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#" ng-click="isCollapsed = !isCollapsed">
Click here to collapse: {{isCollapsed}}
</a>
</h4>
</div>
<div collapse={{isCollapsed}}>
<div class="panel-body"> This Section should collapse
</div>
</div>
</div>
<pre><code>{{ isCollapsed }}</code></pre>
</div>
</body>
</html>
app.js
angular.module('uiApp', ['ngRoute', 'ui.bootstrap', 'ngAnimate'])
.controller('uiController', function($scope) {
$scope.isCollapsed = false;
});
What am I doing wrong.
I found the following question in stackoverflow,
collapse transition not working with angular's UI Bootstrap
but it did not help.
I tried in plunker - click here
It doesn't work there either.

This worked for me. I replaced
<div collapse={{isCollapsed}}>
with
<div uib-collapse="isCollapsed">

Related

Ember.js index not working

I am attempting to create an Ember.js SPA within an ASP.NET MVC5 application. I am using the sample project provided at the weblink below. In it, I have created a new index.cshtml along with application.js and routes.js file. However, the handlebars template is not executing. Below is my code. Does anyone know why this is not working?
All I want is for the menu with the About text to display and for me to click on the About link and see the text "About this app....". Currently, All I see is the text "Test About", so I am inclined to believe that the implementation is done correctly.
https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
EfaAppTabs.cshtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
<h1>Test About</h1>
<script type="text/x-handlebars" data-template-name="EfaEmberApp-1.0.0">
<div class="container">
<div class="page-header">
<h1>Movies</h1>
</div>
<div class="well">
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<ul class="nav nav-tabs">
<li>{{#linkTo 'about'}}About{{/linkTo}} </li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
{{outlet}}
</div>
</div>
</div>
<div class="container">
<p>©2018 EFA</p>
</div>
</script>
<script type="text/x-handlebars" data-template-name="about">
<div class="container"></div>
<h3>About this app...</h3>
</script>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/jquery-ui")
#Scripts.Render("~/bundles/ember")
#Scripts.Render("~/bundles/Efa")
</body>
</html>
EfaEmberApp-1.0.0.js
window.App = Ember.Application.create();
EfaEmberRoutes-1.0.0.js
// Routes
App.Router.map(function () {
this.route('about');
});

How to trigger function on data-toggle with Bootstrap Twitter?

Hello everyone I have list of items in one of the screens. Once user clicks on the item I want to hide that item show the other div container and trigger the function. Here is working example of what I have so far:
function appToggle() {
var codeVal = $(this).data(code);
console.log(codeVal);
}
<html lang="en">
<head>
<title>My Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="Bootstrap/Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="main-container" class="container">
<div id="master_list" class="collapse in">
<fieldset>
<legend>Application</legend>
<div class="list-group">
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#master_list,#master_table">
<span data-code="APP_USERS" class="glyphicon glyphicon-list"></span> Application Users
</a>
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#master_list,#master_table">
<span data-code="APP_POS" class="glyphicon glyphicon-list"></span> Application Positions
</a>
</div>
</fieldset>
</div>
<div id="master_table" class="collapse">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#master_table,#master_list">
<span class="glyphicon glyphicon-plus-sign"></span> Go Back
</button>
</div>
</div>
Test Show/Hide container
</div>
</div>
</body>
</html>
As you can see in example above if user clicks on any item in the list new container will show and list will go off the screen. I would like once they click to trigger appToggle() function that will get code value for the current element. Is there a way to trigger this function automatically without setting function as inline element? If anyone know the way to achieve this please let me know.
Did you try doing that function as an onclick listener? e.g.
$('a.list-group-item').click(function() {
var codeVal = $(this).children('span').data('code');
console.log(codeVal);
});
<html lang="en">
<head>
<title>My Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="Bootstrap/Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="main-container" class="container">
<div id="master_list" class="collapse in">
<fieldset>
<legend>Application</legend>
<div class="list-group">
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#master_list,#master_table">
<span data-code="APP_USERS" class="glyphicon glyphicon-list"></span> Application Users
</a>
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#master_list,#master_table">
<span data-code="APP_POS" class="glyphicon glyphicon-list"></span> Application Positions
</a>
</div>
</fieldset>
</div>
<div id="master_table" class="collapse">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#master_table,#master_list">
<span class="glyphicon glyphicon-plus-sign"></span> Go Back
</button>
</div>
</div>
Test Show/Hide container
</div>
</div>
</body>
</html>

Ui-router not generating templates having checked all options

I'm trying to use a ui-router in Angular to generate a single page with multiple templates in <ui-view></ui-view> but it is unable to load a single template. It just gives a blank page with no JavaScript errors, even the nav bar does not appear.
I have gone through many questions about this on stack but even applying their solutions did not help:
Here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!--stylesheets-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/normalize.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.css">
<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/font-awesome-4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/eleganticons/et-icons.css">
<link rel="stylesheet" type="text/css" href="assets/css/cardio.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap-theme.min.css">
</head>
<body ng-app="myShelfApp">
<nav class="navbar">
<div class="container" >
<!-- Brand and toggle get grouped for better mobile display -->
<!-- <div class="navbar-header">
<button type="button" class="navbar-toggle " data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" href="#"><img src="assets/img/logo.png" data-active-url="assets/img/logo-active.png" alt=""></a>
</div> -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right main-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="devices">Search</a></li>
<li><a ui-sref="addDevice">Add</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div ui-view></div>
<section id="service" class="section section-padded">
<!-- Holder for mobile navigation -->
</section>
<!-- scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-ui-router.js"></script>
<script src="https://unpkg.com/ng-table#2.0.2/bundles/ng-table.min.js"></script>
<script src="app.js"></script>
<script src="service/device.service.js"></script>
<script src="controller/main.controller.js"></script>
<script src="controller/shelf.controller.js"></script>
<script src="controller/device.controller.js"></script>
<script src="controller/newdevice.controller.js"></script>
</body>
</html>
This is the app.js
(function (){
"use strict";
var app=angular.module("myShelfApp",['ui.router','ngTable',"deviceservice"]);
// app.service('DeviceFactoryService',deviceservice(DeviceFactory));
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
.state("home",{
url:"/",
templateUrl:"main.html",
});
}]);
app.run(function($rootScope) {
$rootScope.$on("$stateChangeError", console.log.bind(console));
});
})();
and here are my templates:
<div id="home" ng-Controller="mainController">
<div class="container" >
<div class="row text-center title">
<!--<h2>Services</h2>
<h4 class="light muted">Achieve the best results with our wide variety of training options!</h4>-->
<div class="jumbotron">
<h1 class="display-3"> Device Farm </h1>
<hr class="my-4">
<p><span class="label label-info">{{count}}</span></p>
</div>
</div>
<div class="row services">
<div class="col-md-4">
<a href="/devices" >
<div class="service">
<div class="icon-holder">
<img src="assets/img/icons/phone-blue.png" alt="" class="icon">
</div>
<h3 class="description">My Devices</h3>
</div>
</a>
</div>
<div class="col-sm-4">
<a href="/add_device">
<div class="service">
<div class="icon-holder">
<img src="assets/img/icons/add-blue.png" alt="" class="icon">
</div>
<h3 class="description">Add Device</h3>
</div>
</a>
</div>
<div class="col-md-4">
<a href="">
<div class="service">
<div class="icon-holder">
<img src="assets/img/icons/search-blue.png" alt="" class="icon">
</div>
<h3 class="description">Search Device</h3>
</div></a>
</div>
</div>
</div>
<div ></div>
</div>
And this is my app.index.js where i m redirecting to index.js
var express=require("express");
var app= express();
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
var router=require('./app.routes.js');
var port=8888;
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({'extended':'true'}));
app.use(bodyParser.json());
app.use(methodOverride());
app.use((request,response,next)=>{
console.log(request.headers)
next()
});
app.use('/api',router);
app.get('*',function(req,res){
res.sendFile('index.html',{root:__dirname+'/public'});
});
app.listen(port,error);
function error(err){
if(err){
console.log(`Something went wrong`,err);
}
console.log(`Server is running on ${port}`);
}
So I guys i found the reason why my ui-router wasnt working.
Apparently you cant declare app.module('app',['dependency']) even in your controllers or other modules with angular.modular('app',[]) also will override your main app.module and because of this i the control wasnt entering app.config for the ui-router to work.
refer to answer :
Angular routing config function not called
for further understanding .
Thank you guys

Material design not working with Angular states

Material design features not working while using Angular states.
My set up is as follows:
1. index.html contains all styles and scripts
2. layout.html contains elements of the page layout and UI-VIEW
3. and partial pages are the rest
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Material Admin - Form basic</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="your,keywords">
<meta name="description" content="Short explanation about this website">
<link href='http://fonts.googleapis.com/css?family=Roboto:300italic,400italic,300,400,500,700,900' rel='stylesheet' type='text/css'/>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css?1422792965" />
<link type="text/css" rel="stylesheet" href="css/materialadmin.css?1425466319" />
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css?1422529194" />
<link type="text/css" rel="stylesheet" href="css/material-design-iconic-font.min.css?1421434286" />
</head>
<body class="menubar-hoverable header-fixed ">
<!-- BEGIN JAVASCRIPT -->
<script src="js/Mdesign/jquery-1.11.2.min.js"></script>
<script src="js/Mdesign/jquery-migrate-1.2.1.min.js"></script>
<script src="js/Mdesign/bootstrap.min.js"></script>
<script src="js/Mdesign/spin.min.js"></script>
<script src="js/Mdesign/jquery.autosize.min.js"></script>
<script src="js/Mdesign/jquery.nanoscroller.min.js"></script>
<script src="js/Mdesign/App.js"></script>
<script src="js/Mdesign/AppNavigation.js"></script>
<script src="js/Mdesign/AppOffcanvas.js"></script>
<script src="js/Mdesign/AppCard.js"></script>
<script src="js/Mdesign/AppForm.js"></script>
<script src="js/Mdesign/AppNavSearch.js"></script>
<script src="js/Mdesign/AppVendor.js"></script>
<script src="js/Mdesign/Demo.js"></script>
<script src="js/Dependencies/angular.js"></script>
<script src="js/Dependencies/angular-ui-router.js"></script>
<script src="js/app.js"></script>
<!-- END JAVASCRIPT -->
</body>
</html>
Layout.html
<!-- HEADER BEGINS -->
<header id="header" >
<div class="headerbar">
<div class="headerbar-left">
<ul class="header-nav header-nav-options">
<li class="header-nav-brand" >
<div class="brand-holder">
<a href="">
<span class="text-lg text-bold text-primary">MATERIAL ADMIN</span>
</a>
</div>
</li>
<li>
<a class="btn btn-icon-toggle menubar-toggle" data-toggle="menubar" href="javascript:void(0);">
<i class="fa fa-bars"></i>
</a>
</li>
</ul>
</div>
</div>
</header>
<!-- HEADER ENDS -->
<!-- BASE BEGINS -->
<div id="base">
<div id="content">
<!-- SECTION BEGINS - our UI-VIEW goes here -->
<section>
<div class="container">
<div ui-view>
</div>
</div>
</section>
<!-- SECTION ENDS -->
</div>
<!-- BEGIN MENUBAR-->
<div id="menubar" class="menubar-inverse ">
<div class="menubar-fixed-panel">
<div>
<a class="btn btn-icon-toggle btn-default menubar-toggle" data-toggle="menubar" href="javascript:void(0);">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="expanded">
<a href="../../html/dashboards/dashboard.html">
<span class="text-lg text-bold text-primary ">MATERIAL ADMIN</span>
</a>
</div>
</div>
<div class="menubar-scroll-panel">
<!-- BEGIN MAIN MENU -->
<ul id="main-menu" class="gui-controls">
<li>
<a href="">
<div class="gui-icon"><i class="md md-home"></i></div>
<span class="title">Dashboard</span>
</a>
</li>
<li class="gui-folder">
<a>
<div class="gui-icon"><i class="md md-email"></i></div>
<span class="title">Email</span>
</a>
</li>
</ul>
<!-- END MAIN MENU -->
<!-- FOOTER COPYRIGHT BEGINS-->
<div class="menubar-foot-panel">
<small class="no-linebreak hidden-folded">
<span class="opacity-75">Copyright © 2014</span> <strong>Vinayak</strong>
</small>
</div>
<!-- FOOTER COPYRIGHT ENDS -->
</div>
</div>
<!-- END MENUBAR -->
</div>
<!-- END BASE -->
app.js
var app = angular.module('myApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('index', {
url: '',
templateUrl: 'index.html'
})
.state('layout', {
url: '',
templateUrl: 'pages/layout.html'
})
.state('page1', {
url: '/page1',
templateUrl: 'pages/page1.html'
})
.state('page2', {
url: '/page2',
templateUrl: 'pages/page2.html'
})
});
I know its late, but just had the same issue and maybe can help someone else.
Using Material Design Lite in an Angular app (1.x) with nested views (courtesy of ui-router), not all the MDL components display correctly in the nested views - but it works ok if you place it all in the index file.
adding the following to your angular.run function ensures the components get rendered correctly:
app.run(function($rootScope, $timeout) {
// Required so that MDL components render correctly when using nested views
$rootScope.$on('$viewContentLoaded', function() {
$timeout(function() {
componentHandler.upgradeAllRegistered();
})
})

How to put button on header in AngularJS

I have a header area before my ui-view. I don't want to include my header in every template file. How can I use a directive or something to get a button on top of the page?
The button depends on the pages.
Here some examples:
My main index.html
<!DOCTYPE html>
<html ng-app="smarthome">
<head>
<script type="text/javascript" src="/lib/ionic/js/angular/angular.min.js"></script>
<script type="text/javascript" src="/lib/ionic/js/angular-ui/angular-ui-router.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
</head>
<body>
<section id="content">
<div class="page-header row">
<div class="col-sm-4">
<a href="" ng-show="isBack()" ng-click="goBack()">
<i class="ion ion-arrow-left-c"></i>
</a>
</div>
<div class="col-sm-4">
<h1>blabla</h1>
</div>
<div class="col-sm-4">
<!-- BUTTON HERE -->
</div>
</div>
<div ui-view></div>
</section>
</body>
</html>
Why don't you link a controller to the header and use ng-show in the top div of the header?
Like this:
<body>
<section id="content" ng-controller="headerCtrl">
<div class="page-header row" ng-show="isVisible()>
<div class="col-sm-4">
<a href="" ng-show="isBack()" ng-click="goBack()">
<i class="ion ion-arrow-left-c"></i>
</a>
</div>
<div class="col-sm-4">
<h1>blabla</h1>
</div>
<div class="col-sm-4">
<!-- BUTTON HERE -->
</div>
</div>
<div ui-view></div>
</section>
</body>
</html>
I had a similar requirement. You could add the button function in ng-click by adding the function
angular.module('app', ['LocalStorageModule'])
.run(['$rootScope', function ($rootScope) {
$rootScope.yourFunction = function () {
console.log("clicked here");
}
}]);

Categories