I have walked through similar questions asked by others but no answer seems to apply to my code. I have one modal instance that is opened from the main controller. It is based on the following HTML:
<div class="modal-header">
<h3 class="modal-title">Add media</h3>
</div>
<div class="modal-body" style="min-height:auto;">
<ul class="nav nav-tabs" id="tabContent">
<li class="active">
<a data-toggle="tab" data-target="#urlTab" href="">URL</a>
</li>
<li>
<a data-toggle="tab" data-target="#filesTab" href="">Upload files</a>
</li>
</ul>
<div class="tab-content">
<div id="urlTab" class="tab-pane fade in active">
<form name="form.URLForm" class="form-group">
</form>
</div>
<div id="filesTab" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="save()" ng-disabled="form.URLForm.$invalid">Add</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
The code that triggers the modal is the following:
$scope.openUploadMediaModal = function ($event) {
$event.stopPropagation();
modalInstance = $uibModal.open({
animation: true,
backdrop: 'static',
templateUrl: 'properUrl',
controller: 'ModalCtrl',
scope: $scope,
resolve: {
files: function () {
return $scope.files;
}
}
}).result.then(function (media) {
//something
});
}
Switching tabs is not working and I have no idea why. Everything I have on the first tab is functioning properly so, apparently, there is no problem with the controller or the dependencies. What else could it be?
Thank you very, very much!
just Remove the href="" attribute from anchor tag ( <a>) its work sucessfully
Related
I am using ng-click and ng-show for pagination. In this case it keeps on creating new pages in both direction when ever buttons are clicked i.e it keeps on creating blank pages. It should stop at first and last page respectively. Here I have created three sub-pages for pagination the buttons should play only for this three sub pages.
Looking forward for any help.
thank you.
<div class="container" ng-app="tabApp">
<div class="row" ng-controller="TabController">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li>
<a href ng-click="setTab(tab+1)" class="btn btn-primary btn-lg" role="button">Next</a>
</li>
<li>
<a href ng-click="setTab(tab-1)" class="btn btn-primary btn-lg" role="button">Back</a>
</li>
</ul>
</div>
<div class="col-md-8">
<div class="jumbotron">
<div ng-show="isSet(1)">
<h1>Home page</h1>
<p>Welcome to the website!</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>
<div ng-show="isSet(2)">
<h1>Profile page</h1>
<p>Profile information</p>
</div>
<div ng-show="isSet(3)">
<h1>Messages</h1>
<p> Some messages </p>
</div>
</div>
</div>
</div>
</div>
<script>
angular.module('tabApp', [])
.controller('TabController', ['$scope', function($scope) {
$scope.tab = 1;
$scope.setTab = function(newTab) {
$scope.tab = newTab;
};
$scope.isSet = function(tabNum) {
return $scope.tab === tabNum;
};
}]);
</script>
I have created a codepen
I have a problem with my route in modal, I can retrieve my first route ("/",menu.html) but when I press the buttons, the other routes do not appear.
This is my route:
angular.module('ui.bootstrap.demo').config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state("foo", {
url: "/foo",
template: '<h1>foo</h1>'
})
.state("menu", {
url: "/",
templateUrl: 'menu.html'
})
.state("bar", {
url: "/bar",
template: '<h1>bar</h1>'
})
$urlRouterProvider.otherwise("/");
});
This is my modal with the div view:
<div class="modal-header">
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" id="modal-body">
<div class="row">
<div class="span12 ui-view-container">
<div class="well" ui-view></div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
</div>
And this is my menu.html:
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Quick Start</a>
<ul class="nav">
<li>Route 1</li>
<li>Route 2</li>
</ul>
</div>
</div>
I made a simple plunker with a modal.
State provider has ui-sref to handle route which takes the state name to navigate.
<ul class="nav">
<li><a ui-sref="foo">Route 1</a></li>
<li><a ui-sref="bar">Route 2</a></li>
</ul>
Update
When you open the modal, run it to a default state 'menu' through $state.go('menu').
In order for this to work, inject $state in the controller as bellow:
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl',
function ($uibModal, $log, $document, $state) {
......
$ctrl.open = function (size, parentSelector) {
$state.go('menu');
......
}
});
Plunker updated with comment query.
I'm using a Bootstrap modal to show details of selected items.
I have a snippet of my modal window that i want to make appear.
If i use it as a modal template I have issues with the style.
But if I trigger the modal window as a normal modal, not a ui.bootstrap one, everything works fine. This are my files:
App.js
var app = angular.module('app', ['ui.router', 'ui.bootstrap']);
app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
$urlRouterProvider.otherwise('/');
$stateProvider.state('home', {
url: '/',
templateUrl: 'productos/productos.html'
});
}]);
app.controller('ModalCtrl', function($scope, $uibModal) {
$scope.items = [{
nombre: 'Federico Ribero',
thumb: 'http://placehold.it/369x246',
desc_corta: 'Esto es la decripcion corta de Fede',
descripcion: 'Esto es la descripcion de Fede'
},{
nombre: 'Camila Nosotti',
thumb: 'http://placehold.it/369x246',
desc_corta: 'Esto es la decripcion corta de Cami',
descripcion: 'Esto es la descripcion de Cami'
},{
nombre: 'Juliana Ribero',
thumb: 'http://placehold.it/369x246',
desc_corta: 'Esto es la decripcion corta de Juli',
descripcion: 'Esto es la descripcion de Juli'
}]
$scope.showModal = function(selectedItem) {
var uibModalInstance = $uibModal.open({
templateUrl : 'modalContent.html',
controller : function($scope, $uibModalInstance, $uibModal, item){
$scope.item = item;
},
resolve: {
item: function(){
return selectedItem;
}
} // empty storage
});
uibModalInstance.result.then(function(selectedItem){
$scope.selected = selectedItem;
},function(){
//on cancel button press
console.log("Modal Closed");
});
};
});
View with modal
<!-- ====PROTFOLIO AREA==== -->
<section id="Portfolio" class="protfolio_area section-padding" ng-controller="ModalCtrl">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="work_trigge">
<ul class="trigger mb80 text-center">
<li class="filter active" data-filter="">ALL</li>
<li class="filter" data-filter=".html">HTML</li>
<li class="filter" data-filter=".wordpress">Wordpress</li>
<li class="filter" data-filter=".ui_ux">UI/UX</li>
<li class="filter" data-filter=".print">PRINT</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div ng-repeat="item in items">
<!--First column-->
<div class="col-lg-4 col-md-12 mb-r">
<!--Card-->
<div class="card card-cascade wider">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img ng-src="{{item.thumb}}" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-xs-center">
<!--Category & Title-->
<h5>Shoes</h5>
<h4 class="card-title"><strong><a ng-click="ModalCtrl.showModal(item)">{{item.nombre}}</a></strong></h4>
<!--Description-->
<p class="card-text">{{item.desc_corta}}
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left"><a class="" data-toggle="tooltip" data-placement="top" title="Ver más" ng-click="showModal(item)">Ver más <i class="fa fa-eye"></i></a>
</span>
<span class="right">
<a class="" data-toggle="tooltip" data-placement="top" title="Marcar como favorito"><i class="fa fa-heart"></i></a>
</span>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/First column-->
</div>
</div>
<div class="row">
<div class="col-xs-12 trigger_bottom">
<a href="#!" class="th_bt btn waves-effect waves-light">View All
<i class="zmdi zmdi-long-arrow-right"></i>
</a>
</div>
</div>
</div>
</section>
<!-- ====END PROTFOLIO AREA==== -->
Modal triggered by javascript with no style problems
<!-- Modal -->
<div class="modal fade ql-modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Vista completa del artículo</h4>
</div>
<!--Body-->
<div class="modal-body">
MY MODAL CONTENT GOES HERE.......
</div>
<!--Footer-->
<div class="modal-footer">
<a class="btn btn-default">Ask about details</a>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--/Modal-->
<script type="text/javascript">
$("#myModal").modal("show")
</script>
UI Bootstrap Modal.
<script type="text/ng-template" id="modalContent.html">
<!-- Modal -->
<div class="modal-dialog" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Vista completa del artículo</h4>
</div>
<!--Body-->
<div class="modal-body">
MY MODAL CONTENT GOES HERE.......
</div>
<!--Footer-->
<div class="modal-footer">
<a class="btn btn-default">Ask about details</a>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
<!--/.Content-->
</div>
<!--/Modal-->
</script>
I dont know if you note the first line of my original Modal is:
<div class="modal fade ql-modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
If i remove that line from ui.bootstrap modal, my modal style have issues.
If i add that line to ui.bootstrap modal, my modal window dont appear.
Just show the shadow behind the "panel appeared" but nothing shows up
I hope you could understand my problem. Thanks a lot.
UPDATE 1
It looks like you need to add your class to the top window template of the modal. Luckily, UI Bootstrap provides the windowTopClass property, that allows you to add your class to it:
var modalInstance = $uibModal.open({
windowTopClass: 'ql-modal',
templateUrl : 'modalContent.html',
controller : function($scope, $uibModalInstance, $uibModal, item){
$scope.item = item;
},
resolve: {
item: function(){
return selectedItem;
}
} // empty storage
});
Also, there is no need to include the modal dialog container, or the content container:
<div class="modal-dialog" role="document">
<div class="modal-content"></div>
</div>
This is already included by default in UI Bootstrap. If you look at the source code for the library, you will see the window template (https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html) already includes this container:
<div class="modal-dialog {{size ? 'modal-' + size : ''}}"><div class="modal-content" uib-modal-transclude></div></div>
Also, if you want to make changes to this window tempalte, UI Bootstrap provides another property windowTemplateUrl where you can provide your own template:
var modalInstance = $uibModal.open({
windowTopClass: 'ql-modal',
windowTemplateUrl: 'windowTemplate.html',
templateUrl : 'modalContent.html',
controller : function($scope, $uibModalInstance, $uibModal, item){
$scope.item = item;
},
resolve: {
item: function(){
return selectedItem;
}
} // empty storage
});
I'm newbie to angular world. I'm trying to create a login page.When the user login, i want to show some contents in the navbar.
Currently i'm using ng-show and ng-route. When i'm not using ng-route, ng-show works fine but when i use ng-route, ng-show is not working .I don't want to use angular-ui-router. What i'm doing wrong. Can anyone help me
Angular Config
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'login.html',
controller: 'ctrl'
})
.when('/logged', {
templateUrl: 'logged.html',
controller: 'ctrl'
})
otherwise({
redirectTo: '/'
});
}]);
app.controller("ctrl",['$scope','$http','$location',function($scope,$http,$location){
$scope.myvalue2=false;
$scope.login = function()
{
//here i making the $http.post to login on success im changing $scope.myvalue2=true;
}
}]);
HTML
<nav class="navbar-default navbar-dark bg-primary">
<div class="navbar">
<div class="container-fluid navi">
<div class="navbar-header" style="padding-bottom:10px">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="navbar-brand " style="list-style:none;padding-top:10px;"><li>name</li></ul>
</div>
<div ng-show="myvalue2" class="ng-cloak">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="padding-top:10px">
<ul class="nav navbar-nav">
<li>About</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" style="font-size:14px;">Settings</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
I don't think that ngRoute would have any impact on ng-show. It's working fine check this working demo :
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.myvalue2 =false;
$scope.login = function() {
$scope.myvalue2=true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<a ng-click="login()">Login</a>
<div ng-show="myvalue2">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="padding-top:10px">
<ul class="nav navbar-nav">
<li>About</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" style="font-size:14px;">Settings</a></li>
</ul>
</div>
</div>
</div>
You're going to want to use the digest cycle here, and do away with ng-show, since its use gets easily mistaken for the more elegant and simpler-to-understand ng-if.
In short:
AJAX calls will trigger a digest cycle.
ng-if will actively remove DOM if its condition is not met, thus drawing less DOM.
Changing the value on an AJAX call in an ng-if will work instead of hiding the DOM element, since it'll be eligible to be visible anyway.
The ng-cloak class is throwing me off; you probably don't need that there, since with ng-if, it won't be anywhere in the DOM until you actually need it.
What your controller might look like:
app.controller("ctrl", [
'$scope',
'$http',
'$location',
function ($scope, $http, $location) {
$scope.myvalue2 = false;
$scope.login = function () {
$http.get('/path/to/your/request', function(data) {
$scope.myvalue2 = true;
});
}
}]);
What your DOM would need to change to (and yes, I prefer absolute truth to truthiness):
<div ng-if="myvalue2 === true">
This will help you,
<div ng-app="myApp" ng-controller="myCtrl">
<button class="btn btn-success" type="text" ng-model="firstName" ng-show="display" ng-click="display=!display"> BUTTON 1</button>
<br />
<button class="btn btn-warning" ng-click="display=!display" ng-model="lastName" ng-show="!display"> BUTTON 2
</button>
</div>
DEMO
I am using Mobile Angular UI.
In parent window there is list of category names. I want selected category name should get updated from modal. I am able to display modal. I want to pass selected category item from parent view to modal.
My code in parent view
<div ng-controller="CategoryController as TitleCats">
<div ng-repeat="cats in TitleCats.categories">
<a href=""
ui-turn-on="titleCatUpdatemodal"
class="btn btn-default" ng-click="TitleCats.openUpdateModel(cats)"> {{cats.name}} --> Edit</a>
</div>
<div ui-content-for="modals">
<div ng-include="'pages/titleCatUpdatemodal.html'"></div>
</div>
</div>
My Modal is
<div class="modal" ui-if='titleCatUpdatemodal' ui-state='titleCatUpdatemodal'>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close"
ui-turn-off="titleCatUpdatemodal">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p><input type="text" ng-model="cats.name" >{{ cats.name }}</p>
</div>
<div class="modal-footer">
<button ui-turn-off="titleCatUpdatemodal" class="btn btn-default">Close</button>
<button ui-turn-off="titleCatUpdatemodal" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
When i click button it opens modal but no value!
Anyone please let me know how to get value in modal. Thanks in advance.
In your controller. you should have something similar to this:
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'templates/myModal.html',
controller: 'myModalCtrl',
resolve: {
myData: function () {
//do stuff
return stuff;
}
}
});
Inside that resolve, you can fill out the function which should then be accessible in your modals controller