I tried to use "ng-click" from angular into a html page and I managed. But if i try to use the same "ng-click" on the same function in a bootstrap modal code don't work anymore. Why. How to call mehod in the second case ?
This is my html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div ng-controller="MainController">
Call from file<br/>
Call from a pop-up
</div>
<div class="modal fade" id="about" role="dialog">
<div class="modal-dialog" modal-sm>
<div class="modal-content">
<div class="modal-header">
<h4>Pop-up head.</h4>
</div>
<div class="modal-body">
<h4>Pop-up body.</h4>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="first()">Send</button>
</div>
</div>
</div>
</div>
</body>
</html>
And this is my script
var myApp = angular.module('myApp', []);
myApp.controller("MainController", function($scope){
$scope.val= 1
$scope.even= false
$scope.increment = function(){
$scope.val +=1
$scope.even = ($scope.val%2 == 0)?true:false;
//$scope.even = $scope.val%2 == 0
}
$scope.first = function(){
alert("work");
}
})
The reason is that when the modal shows up the processing of all angular directives is already over. Hence the ng-click attribute on the template of modal that is going to be appended to the DOM later on makes no difference.
Generally you would like the HTML to be compiled with a the correct scope.
If you don't want to get into details of this, use Angular UI for Bootstrap
This will give you nice directives and services for bootstrap widgets.
There is a $modal service that can be used just like the $http service which returns a promise.
Here also you can have callbacks for events when modal disappears or closes.
There is sample code in the example. Here is how a function that will bring up a modal would look like:
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
Related
I have a magnifying glass that when you hover or click on it, it expands to a full search bar. I want the functionality to be that when the search bar is active, it will stay expanded until clicked off, or will stay expanded if the bar has a value. I have the logic in jQuery, but this is my first time using AngularJS (not Angular) and I do not know how to turn this jQuery into a directive, or if there is some built in functionality I am missing. Thank you!
jQuery("#inpt_search").on("focus", function () {
jQuery(this).parent("label").addClass("active");
});
jQuery("#inpt_search").on("blur", function () {
if (jQuery(this).val().length == 0)
jQuery(this).parent("label").removeClass("active");
});
var myApp = angular.module('myApp', []);
// set for Home Controller
myApp.controller('HomeCtrl', function($scope) {
$scope.blueClass = function() {
$scope.class_name = "blue";
$scope.multi_message ="Blue Class Added";
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<html>
<head>
<link data-require="bootstrap-css#3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js#1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="HomeCtrl">
<div class="alert" ng-class="{blue:'bg-info', red:'bg-danger',green:'bg-success' }[class_name]">{{multi_message}}</div>
<a class="btn btn-info" ng-click="blueClass()"> Blue Class</a>
</div>
</body>
</html>
My app shows an HTML page with multiple views, and each view can be conditionally built from multiple HTML templates.
I want to edit each HTML file and add a few lines at the top, something like
<div ng-if="showFileNames”>
<hr>
<p>Start of file {{how do I get the file name}}</p>
<hr>
</div>
And maybe the same at the footer.
Thus, by setting $scope. showFileNames to true, I could switch the display of file names on/off and see how my page is actually composed (is this clear, or should I add some ascii art?).
I could just hard code {{how do I get the file name}} in each file, but doing it dynamically means that I can more easily add the code to each file, plus it guards against files being renamed.
Can it be done? If so, how?
[Update] I just realized that the question didn't explain well enough. Sorry.
I need to stress that part where I said
each view can be conditionally built from multiple HTML templates
While the view is state based, its contents are built from different <ng-include> files, based on data.
So, state A might include A.html, but, based on the data, that view might <ng-include> B.html, C.html and E.html, or it might <ng-include> F.html, G.html and H.htFl - and I want to show the file name of each at the head & foot of the part of the view shown by each file
Update: You may have templates loaded with ui-view and ng-include. The example given bottom of this answer has a nice generic directive to return the corresponding template name even though if you nested ui-view and ng-include together. Click through "Home", "About" and "Named View" link inside "About".
Few theory goes below,
If you use ui-view then you can try this with $state.current.templateUrl as below.
<div ng-if="showFileNames”>
<hr>
<p>Start of file {{$state.current.templateUrl}}</p>
<hr>
</div>
The above will work if you had defined your state as below,
.state('state1', {
url: '/state1',
templateUrl: 'partials/state1.html'
controller: 'State1Ctrl'
})
But if you had defined this as named views as below,
$stateProvider
.state('report',{
views: {
'filters': {
templateUrl: 'report-filters.html',
controller: function($scope){ ... controller stuff just for filters view ... }
}
}
}
})
Then, better you can have a method assigned with the $rootScope as below and pass the $state.current.views from the html to the function.
$rootScope.getTemplate = function(view) {
var keys = Object.keys(view);
if(keys.length === 0) return '';
return view[keys[0]].templateUrl;
};
and the html,
<div ng-if="showFileNames”>
<hr>
<p>Start of file {{getTemplate($state.current.views)}}</p>
<hr>
</div>
But you can have a look at the below generic directive which covers ui-view, nested ui-view, named ui-view and ng-include and even a bit of complex nesting with ui-view and ng-include.
Generic directive with an example page
Click through "Home", "About" and "Named View" link inside "About"
var app = angular.module('app', ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html',
controller: 'TestController'
})
.state('about', {
url: '/about',
templateUrl: 'about.html',
controller: 'TestController'
})
.state('about.named', {
url: '/named',
views: {
'named': {
templateUrl: 'named.html',
controller: 'TestController'
}
}
});
}
]);
app.controller('TestController', function($scope) {
});
app.directive('templateName', ['$state', function($state) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var templateName = $state.current.templateUrl;
var includesParent = $(element).closest('[ng-include]');
if(includesParent && includesParent.length > 0) {
if(includesParent.find('[ui-view]').length === 0) {
templateName = scope.$eval(includesParent.attr('ng-include'));
}
}
if(!templateName && $state.current.views) {
var uiViewParent = $(element).closest('[ui-view]');
var viewName = $state.current.views[uiViewParent.attr('ui-view')];
if(viewName) {
templateName = viewName.templateUrl;
}
}
element.html(templateName);
}
};
}]);
angular.bootstrap(document, ['app']);
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
<div>
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation" ng-include="'nav.html'">
</nav>
<!-- MAIN CONTENT -->
<div class="container">
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div ui-view></div>
</div>
<script type="text/ng-template" id="home.html">
<h3>Home Page</h3>
<p>Start of file: <span template-name></span></p>
</script>
<script type="text/ng-template" id="about.html">
<h3>About Page<h3>
<p>Start of file: <span template-name></span></p>
<div ng-include="'aboutUs.html'"></div>
</script>
<script type="text/ng-template" id="aboutUs.html">
<h3>About us<h3>
<p>Start of file: <span template-name></span></p>
<a ui-sref="about.named">Named View</a>
<div ui-view="named"></div>
</script>
<script type="text/ng-template" id="named.html">
<h3>Named View<h3>
<p>Start of file: <span template-name></span></p>
</script>
<script type="text/ng-template" id="nav.html">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">Start of file: <span template-name></span></a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</script>
</div>
Hi I'm trying to make a slider I got off the internet to work, but, I keep getting errors. In gallery.html, when I put the slider element at the top I get nothing, when I put it at the bottom I get errors. The error is something along the lines
Error: [$compile:tplrt] http://errors.angularjs.org/1.4.8/$compile/tplrt?p0=slider&p1=partials%2Fgallery.html
Changed my code to match the suggestions in one of the comments.
I'm no longer getting the error to do with not have just 1 root element. Now, I can't get the next and previous to work. It just redirects me to the main page.
Note:
- gallery.html and slider.html are in a folder called partials
- all the images are in a folder called img
Thanks in advance!
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<!-- ANGULAR IMPORTS -->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/ui-router-master/release/angular-ui-router.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-animate.js"></script>
<!-- JS FILES -->
<script src="js/controller.js"></script>
<script src="js/directives.js"></script>
<link href='css/app.css' rel='stylesheet' type='text/css'>
</head>
<body class="container">
<div class="navbar">
<a class="brand" href="#">Quick Start</a>
<ul class="nav">
<li><a ui-sref="state1">State 1</a></li>
<li><a ui-sref="state2">State 2</a></li>
<li><a ui-sref="gallery">Gallery</a></li>
</ul>
</div>
<div class="dynamiccontent">
<div ui-view></div>
</div>
<!-- App Script -->
<script>
/** MAIN ANGULAR VAR */
var myapp = angular.module('myapp', [
/**IMPORT DEPENDENCIES*/
'ui.router',
'ngAnimate',
/**FILE DEPENDENCIES*/
'appController',
'slider.directive'
]);
/** UI-ROUTING */
myapp.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /state1
$urlRouterProvider.otherwise("/state1")
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
})
.state('state1.list', {
url: "/list",
templateUrl: "partials/state1.list.html",
controller: 'state1controller'
})
.state('gallery', {
url: "/gallery",
templateUrl: "partials/gallery.html",
controller: 'slidercontroller'
})
.state('state2', {
url: "/state2",
templateUrl: "partials/state2.html"
})
.state('state2.list', {
url: "/list",
templateUrl: "partials/state2.list.html",
controller: 'state2controller'
});
});
</script>
</body>
</html>
controller.js
var appController = angular.module('appController',[]);
appController.controller('state1controller', ['$scope', function($scope){
$scope.items = ["A", "List", "Of", "Items"];
}]);
appController.controller('state2controller', ['$scope', function($scope){
$scope.things = ["A", "List", "Of", "Items"];
}]);
appController.controller('slidercontroller', ['$scope', function($scope) {
$scope.pictures=[{src:'img1.png',title:'Pic 1'},{src:'img2.jpg',title:'Pic 2'},{src:'img3.jpg',title:'Pic 3'},{src:'img4.png',title:'Pic 4'},{src:'img5.png',title:'Pic 5'}];
}]);
directive.js
angular.module('slider.directive', [])
.directive('slider', function ($timeout) {
return {
restrict: 'AE',
replace: true,
scope:{
pictures: '='
},
link: function (scope, elem, attrs) {
scope.currentIndex=0;
scope.next=function(){
scope.currentIndex<scope.pictures.length-1?scope.currentIndex++:scope.currentIndex=0;
};
scope.prev=function(){
scope.currentIndex>0?scope.currentIndex--:scope.currentIndex=scope.pictures.length-1;
};
scope.$watch('currentIndex',function(){
scope.pictures.forEach(function(image){
image.visible=false;
});
scope.pictures[scope.currentIndex].visible=true;
});
/* Start: For Automatic slideshow*/
var timer;
var sliderFunc=function(){
timer=$timeout(function(){
scope.next();
timer=$timeout(sliderFunc,5000);
},5000);
};
sliderFunc();
scope.$on('$destroy',function(){
$timeout.cancel(timer);
});
/* End : For Automatic slideshow*/
},
templateUrl:'partials/slider.html'
}
});
gallery.html
<slider pictures="pictures"></slider>
slider.html
<div class="slider">
<div class="slide" ng-repeat="image in pictures">
<img ng-src="img/{{image.src}}"/>
</div>
<div class="arrows">
<img src="img/left-arrow.png"/>
<img src="img/right-arrow.png"/>
</div>
</div>
You are mixing several concerns here. partials/gallery.html is used as a template for your directive and your page. This leads to the directive being used itself in it's own template.
The solution is to remove your directive code from gallery.html and use it in a new file slider.html.
directive.js
.directive('slider', function ($timeout) {
return {
...
templateUrl:'partials/slider.html'
slider.html
<div class="slider">
<div class="slide" ng-repeat="image in images">
<img ng-src="img/{{image.src}}"/>
</div>
<div class="arrows">
<img src="img/left-arrow.png"/>
<img src="img/right-arrow.png"/>
</div>
</div>
gallery.html
<slider images="pictures"/>
First off - the error does have to do with the root element.
https://docs.angularjs.org/error/$compile/tplrt
Template for directive '{0}' must have exactly one root element. {1}
Now that you fixed that issue - your infinite loop is called because you're trying to populate the slider directive with gallery.html - but in that template, you're calling the slider directive. So that's an infinite loop.
I want to perform some Jquery Event on clicking the Close sign on the alert Block of Jquery.
My VIew code is as below::
<div class=' alert alert-block fade in' >
<button type='button' class='close' data-dismiss='alert'>×</button>
<p>Just Close Me </p>
<div>
My Js code is as below::
$('button.close').click(function () {
var id = $(this).attr('data-id');
alert("deleted list is"+id);
});
As per the above code I am not able to detect or do Jquery events on clicking that 'X' button.
If you're using Bootstrap 3, you need to do this:
$('#my-alert').on('close.bs.alert', function () {
//code
});
I know this is quite old now but this is worth a look
http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=alert-events
<script type="text/javascript">
$(document).ready(function(){
$("#myAlert").bind('closed.bs.alert', function(){
alert("Alert message box has been closed.");
});
});
</script>
<div id="myAlert" class="alert alert-info">
×
<strong>Note!</strong> Please read the comments carefully.
</div>
When you do a close, the dom element corresponding to the alert is removed from the Dom.
Try this instead:
<html>
<head>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body>
<form id="myform">
<input type="submit" value="Submit">
</form>
<div id="messages" class="hide" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="messages_content"></div>
</div>
<script>
$('#myform').submit(function(e) {
$('#messages').removeClass('hide').addClass('alert alert-success alert-dismissible').slideDown().show();
$('#messages_content').html('<h4 class="usefont" style="text-align: center">Thank you message!</h4>');
$('#modal').modal('show');
e.preventDefault();
});
$('#messages').on('close.bs.alert', function (e) {
$('#messages').removeClass('alert alert-success alert-dismissible').addClass('hide').slideDown().show();
e.preventDefault();
});
</script>
</body>
This is how you bind the close event
$('#my-alert').bind('close', function () {
//do something…
})
PS. You should read the manual, everything is in it.
I'm new to web development and I'm trying to understand how the DOM works.
I have a basic page with 2 buttons and some text. One of the buttons does a call to Jquery's Get function. My server returns some html with some script as well. Which is then added to my DIV on my main page which has an ID of 'content'
See below for the code.
Main Page
<!DOCTYPE html>
<link rel="stylesheet" href="css/toastr.css">
<html>
<body>
<h1>My Main Page </h1>
<button class="alertmsg">click me</button>
<button class="addDom" >Call Add HTML</button>
<div id="content">
</div>
</body>
</html>
<script src="js/jquery.js"></script>
<script src="js/toastr.js"></script>
<script>
$(document).ready(function(){
$(".alertmsg").click(function() {
alert("Hello World!");
});
$(".addDom").click(function(){
$.get( '/adddom',
function (data) {
// put html into the section
$("div#content").html(data);
})
});
});
</script>
Code Returned
<div>
<h1>Added Via $.html</h1>
<button class="showmsg">click me for jquery</button>
</div>
<script>
$(document).ready(function(){
$(".showmsg").click(function(){
toastr.warning( "Test Warning", 'Warning');
});
});
</script>
The Updated DOM - notice that my new javascript aren't seen.
<!DOCTYPE html>
<link rel="stylesheet" href="css/toastr.css">
<html>
<body>
<h1>My Main Page </h1>
<button class="alertmsg">click me</button>
<button class="addDom" >Call Add HTML</button>
<div id="content">
<div>
<h1>Added Via $.html</h1>
<button class="showmsg">click me for jquery</button>
</div>
</div>
</body>
</html>
<script src="js/jquery.js"></script>
<script src="js/toastr.js"></script>
<script>
$(document).ready(function(){
$(".alertmsg").click(function() {
alert("Hello World!");
});
$(".addDom").click(function(){
$.get( '/adddom',
function (data) {
// put html into the section
$("div#content").html(data);
})
});
});
</script>
What I'm trying to understand is;
1) Where does my new script code exist?
<script>
$(document).ready(function(){
$(".showmsg").click(function(){
toastr.warning( "Test Warning", 'Warning');
});
});
</script>
is it in memory only and not in the DOM?
2) I can get the warning to show correctly i.e $(".showmsg").click
fires and shows what is expected. So my my script can reference the existing libraries in the DOM which are needed. How does this work?
3) What is the best way to trouble shoot this code if I cannot see it in my browser?
Many thanks!
If you really want to append the script to the dom you need to use appendChild() not .html(). link about appendChild
An example of doing this would be
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.text = 'alert("test");';
$('div')[0].appendChild(script);
Here is a fiddle showing this.