Dynamically bind click event to button in template-url source - angularjs

I am using ui-bootstrap angularjs for generating slide down's and added a button and click event, with alert message in controller but I don't get any alert or console log.
I am facing problem in generating alert on click of button which is being loaded using template-url as you can see in code below. I am sharing my sample code below.
angular.module('ui.bootstrap.demo', [ 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
console.log("CTRL LOADED");
$scope.alertMsg = function(){
alert('hejd');
}
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.2.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AccordionDemoCtrl">
<script type="text/ng-template" id="group-template.html">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<button ng-click="alertMsg()">Btn</button>
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
<span uib-accordion-header ng-class="{'text-muted': isDisabled}">
{{heading}}
</span>
</a>
</h4>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
</div>
</script>
<uib-accordion close-others="oneAtATime">
<div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html">
<uib-accordion-heading>
Custom template with custom header template <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isCustomHeaderOpen, 'glyphicon-chevron-right': !status.isCustomHeaderOpen}"></i>
</uib-accordion-heading>
World
</div>
</uib-accordion>
</div>
</body>
</html>
I do get the log "CTRL LOADED". But I am not getting alert message when I click.


I believe the panel creates its own scope so you need to call the parent scope to get the alert message like so:
<div ng-controller="AccordionDemoCtrl">
<script type="text/ng-template" id="group-template.html">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<button ng-click="$parent.alertMsg()">Btn</button>
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
<span uib-accordion-header ng-class="{'text-muted': isDisabled}">
{{heading}}
</span>
</a>
</h4>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
</div>
</script>
Here is a Plunker

Related

How to show large image using Bootstrap or Angularjs?

I am using bootstrap and angularjs, I want to show large image on. I clicked image but its not working. How do this? Any built-in library of bootstrap when I show large image.
<html>
<head>
<script type="text/javascript">
$(function() {
$('.pop').on('click', function() {
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
});
</script>
</head>
<body>
<a href="#" class="pop">
<img src="http://patyshibuya.com.br/wp-content/uploads/2014/04/04.jpg" style="width: 400px; height: 264px;">
</a>
<a href="#" class="pop">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" style="width: 400px; height: 264px;">
</a>
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<img src="" class="imagepreview" style="width: 100%;" >
</div>
</div>
</div>
</div>
</body>
</html>

AngularJS doesn't work Visual Studio?

I have just started with learning AngularJS and everthing works great before I started to write some easy controller method and method doesn't work even i include ng-contoller I tried to include it as separated js file but that also doens't work I am new to angularJS so I would appreciate any help I also tried with notped++ to do the same but doesn't work this is my code;
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.9.1.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<div class="container" data-ng-controller="AppController">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Contact Manager</a>
</div>
<div class="collapse navbar-collapse" id="nav-toggle">
<ul class="nav navbar-nav">
<li class="alert-success">Browse</li>
<li>Add contacts</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<input type="text" class="form-control" placeholder="Search"/>
</form>
</div>
</nav>
<div class="page-header">
<h2>Prvo poglavlje <small>Hello world</small></h2>
</div>
<div class="container">
<div class="jumbotron">
<h1>Hello, {{name||"World"}}</h1>
<input type="text" class="form-control input-lg" data-ng-model="name" />
</div>
<div class="row">
<div class="col-sm-8 pull-right hidden-lg" >
<div class="row">
<div class="col-sm-6">
<p>Prvi</p>
</div>
<div class="col-sm-6">
<p>Drugi</p>
</div>
</div>
</div>
<div class="col-sm-4 pull-left show" >
This is our sidebar
</div>
</div>
<div class="row">
<div class="col-md-8">
<button ng-click="clickHandler()">Click me</button>
</div>
</div>
</div>
</div>
<script>
function AppController($scope) {
$scope.clickHandler = function () {
window.alert("Clicked");
};
}
</script>
</body>
</html>

You have to define a module before instantiate your controller:
angular
.module('app', [])
.controller('AppController', AppController);
AppController.$inject = ['$scope'];
function AppController($scope) {
$scope.clickHandler = function () {
window.alert("Clicked");
};
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
<div class="container" ng-controller="AppController">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Contact Manager</a>
</div>
<div class="collapse navbar-collapse" id="nav-toggle">
<ul class="nav navbar-nav">
<li class="alert-success">Browse</li>
<li>Add contacts</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<input type="text" class="form-control" placeholder="Search" />
</form>
</div>
</nav>
<div class="page-header">
<h2>Prvo poglavlje <small>Hello world</small></h2>
</div>
<div class="container">
<div class="jumbotron">
<h1>Hello, {{name||"World"}}</h1>
<input type="text" class="form-control input-lg" data-ng-model="name" />
</div>
<div class="row">
<div class="col-sm-8 pull-right hidden-lg">
<div class="row">
<div class="col-sm-6">
<p>Prvi</p>
</div>
<div class="col-sm-6">
<p>Drugi</p>
</div>
</div>
</div>
<div class="col-sm-4 pull-left show">
This is our sidebar
</div>
</div>
<div class="row">
<div class="col-md-8">
<button ng-click="clickHandler()">Click me</button>
</div>
</div>
</div>
</div>
</body>
</html>

You have not defined the module anywhere in the code,
In View:
<html ng-app="myApp">
In JS:
var app = angular.module("myApp", []);
Working Sample

You need to include the angular module. Angular works with modules.
Controllers are part of module.
Try something like this:
app = angular.module("myApp", []);
app. Controller(...);
And use this module in your html like
<html ng-app="myApp">
Also,
The controller declaration you are using is old.
Try this:
app.controller('controllerName', ['$scope', function($scope){...}]);

Knockout Bindings are not being applied when using angular templates

I'm trying to port an angular example to dukescript and navigation behaves as spected, but when tried to apply bindings nothing happened.
I've tried both with the script tag an in external files with the same results and knockoutjs bindings are not being applied.
Extract:
<script>
.
.
.
<span style="float:left;" id="movimientos" data-bind="text:movimientos"></span>
.
.
.
<script>
Full code:
<html ng-app="proyecto" dir="ltr"><head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Puzzle Logic</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/estilos.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/app.js"></script>
<script src="js/routes.js"></script>
<script src="js/controllers.js"></script>
<script src="js/controllers/dashboard.js"></script>
</head>
<body contenteditable="true">
<!-- animation="slide-left-right-ios7" class="platform-android platform-cordova platform-webview" -->
<ion-nav-view> </ion-nav-view>
<script id="templates/home.html" type="text/ng-template">
<ion-view>
<ion-content padding="true" class="fondoDePaisaje">
<button class="button button-assertive icon ion-gear-a" style="float:right;"></button>
<br>
<br>
<!--logo-->
<div id="logo" style="text-align:center;">
<img src="img/logo_pusle.png" alt="Puzzle Land" width="300rem">
<div id="botones_comienzo">
<a href="#/dashboard" class="opcion_menu">
<span>J</span>
<span>u</span>
<span>g</span>
<span>a</span>
<span>r</span>
</a>
<br>
<br>
<a href="#/score" class="opcion_menu">
<span>S</span>
<span>c</span>
<span>o</span>
<span>r</span>
<span>e</span>
</a>
<br>
<br>
<a href="" class="opcion_menu">
<span>A</span>
<span>y</span>
<span>u</span>
<span>d</span>
<span>a</span>
</a>
</div>
</div>
<br>
<br>
<br>
<br>
<!--pie de pagina-->
<div class="row-center" style="background-color:transparent; text-align: center;">
<div>Derechos Reservados</div>
</div>
</ion-content>
</ion-view>
</script>
<script id="templates/dashboard.html" type="text/ng-template">
<ion-view>
<!-- ng-controller="CntrlDashboard" -->
<ion-content class="fondoDePaisaje">
<!--movimientos realizados-->
<div class="mismovimientos">
<span style="float:left;">Mov:</span>
<span style="float:left;" id="movimientos" data-bind="text:movimientos"></span>
Nuevo
<!--cronometro-->
<span style="float:right; margin-rigth:10px; padding-right:20px;">T:<span id="minutos">0</span>:<span id="segundos">0</span></span>
<div style="clear:both;"></div>
</div>
<!--crearemos la tabla-->
<div class="row tabla" id="tabla1">
<div class="col" posicion="0" id="p1" ng-click="mensaje( $event )">1</div>
<div class="col" posicion="1" id="p2" ng-click="mensaje( $event )">2</div>
<div class="col" posicion="2" id="p3" ng-click="mensaje( $event )">3</div>
<div class="col" posicion="3" id="p4" ng-click="mensaje( $event )">4</div>
</div>
<div class="row tabla" id="tabla2">
<div class="col" posicion="0" id="p5" ng-click="mensaje( $event )">5</div>
<div class="col" posicion="1" id="p6" ng-click="mensaje( $event )">6</div>
<div class="col" posicion="2" id="p7" ng-click="mensaje( $event )">7</div>
<div class="col" posicion="3" id="p8" ng-click="mensaje( $event )">8</div>
</div>
<div class="row tabla" id="tabla3">
<div class="col" posicion="0" id="p9" ng-click="mensaje( $event )">9</div>
<div class="col" posicion="1" id="p10" ng-click="mensaje( $event )">10</div>
<div class="col" posicion="2" id="p11" ng-click="mensaje( $event )">11</div>
<div class="col" posicion="3" id="p12" ng-click="mensaje( $event )">12</div>
</div>
<div class="row tabla" id="tabla4">
<div class="col" posicion="0" id="p13" ng-click="mensaje( $event )">13</div>
<div class="col" posicion="1" id="p14" ng-click="mensaje( $event )">14</div>
<div class="col" posicion="2" id="p15" ng-click="mensaje( $event )">15</div>
<div class="col vacio" posicion="3" id="p16" ng-click="mensaje( $event )"></div>
</div>
<!--volver-->
<div class="mismovimientos">
<span style="float:left; font-size:16px !important;">Derechos Reservados</span>
Volver
<div style="clear:both;"></div>
</div>
</ion-content><!--cierre del contenido-->
</ion-view>
</script>
</body></html>
How can I fix it?
Update
Did a test on dew and the results are that bindings are not applied inside the script tag.
Test
Java:
package dew.demo.ko4j;
import net.java.html.json.*;
#Model(className="Hello", properties={
#Property(name="say", type=String.class)
})
class HelloViaKO {
static {
Hello model = new Hello("Hello World!");
model.applyBindings();
}
}
HTML:
<h1>Hello</h1>
Test 1!
<div>
<span style="float:left;" id="moves" data-bind="text: say">vxc</span>
</div>
Test2!
<script>
<span style="float:left;" id="moves" data-bind="text: say">vxc</span>
</script>
Test3!
<script>
<span style="float:left;" id="moves">hello</span>
</script>
The generated HTML is
and the highighted part should be:
<script>
<span style="float:left;" id="moves" data-bind="text: say">Hello World!</span>
</script>

You've switched to knockout for binding, so I'll update my answer:
Your DEW example tries to show that bindings are not applied inside script tags. But script tags are not rendered in the UI, so even if the bindings would be applied in your example, you wouldn't see it in the output.
Despite that, your assumption that they are not applied is correct. This is the expected and correct behavior. In Knockout, script tags can be used to define templates:
http://knockoutjs.com/documentation/template-binding.html
In that case the template binding takes the active template script, inserts it at the chosen location and only then applies the bindings.

How to use a dropdown bar and ng-view

I've looked at ng-view according to
https://docs.angularjs.org/api/ngRoute/directive/ngView
However, I'm very unsure as to how I would incorporate the above with the dropdown menu.
Here's a few screenshots showing what the website currently looks like for reference.
imgur.com/a/NUVEe
Here's the code
index.html
<html ng-app="app">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body ng-controller="MainController">
<nav class="navbar navbar-default">
<div class="container"> <!-- top intro part -->
<div class="navbar-header">
<a class="navbar-brand" href="#/"> OPENCV 3.0.0</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
<ng-view>
<div class="row"> <!-- Dropdown menu -->
<div class="col-md-20">
<div id="main">
<form class="form-horizontal" role="form">
<label class="control-label col-md-2">Filter List:</label>
<div class="col-md-5">
<select class="form-control"
ng-options="filter for filter in filters"
ng-model="filter"
ng-change="GoToOpenCVpage(filter)">
<option value=""> Select Filter</option>
</select>
</div>
</form>
</div>
</div>
</div>
</ng-view>
<div id = "content"> <!-- stuff showing opencv filter goes in here -->
<ng-view>
</ng-view>
</div>
<script src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
makegray.html (the html content I want to inject into index.html)
<html ng-app="app">
<head>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
</head>
<body ng-controller="MainController">
<nav class="navbar navbar-default">
<div class="container"> <!-- top intro part -->
<div class="navbar-header">
<a class="navbar-brand" href="#/"> MAKE GRAY</a>
</div>
</div>
</nav>
<form action="../php/makegray.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
<script src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
angularJS
var app = angular.module("app", ["ui.bootstrap"]);
/*app.factory("API", function($http) {
return {
getFilters: function(callback) {
$http.get("filters.php").success(callback);
}
}
});*/
app.controller("MainController", function($scope) {
$scope.ListOfOpenCV = {}; // declare array
// $scope.ListOfOpenCV.filter = "";
$scope.filters = ["MakeGray", "Sobel"];
//$scope.ListOfOpenCV.filter = $scope.filters[0];
$scope.GoToOpenCVpage = function(filter){
if(filter === "MakeGray"){
// window.location("pages/Canny.html");
window.open("pages/MakeGray.html", "_blank","height = 400, width = 700");
}
};
});

Angular UI-Bootstrap - Collapse function not working

I have been following the docs for ui-bootstrap. And in the section(ui.bootstrap.collapse) they talk about making a collapse function for content when you click a button.
But I cannot seem to make the Collapse seem to work in my code.
What am I missing or doing wrong?
I have looked at other Stacks and have seen that other people use anchor tags instead of button tags. So I don't think that is the issue.
Index HTML
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="description" content="stuff">
<meta name="keywords" content="stuff">
<meta name="author" content="stuff">
<title> Title</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<!-- Custom styles -->
<link href="css/style.css" rel="stylesheet">
<link href="css/svg_style.css" rel="stylesheet">
<!--Jquery -->
<script src="lib/jquery/dist/jquery.min.js"></script>
<!-- Angular -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<script src="lib/angular-animate/angular-animate.min.js"></script>
<script src="lib/angular-cookies/angular-cookies.min.js"></script>
<!-- Bootstrap -->
<script src="lib/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
</head>
<body id="index_body">
<div data-ng-controller="HeaderCtrl">
<div class="top-header" data-ng-include="templateUrl"></div>
</div>
<div class="page [[ pageClass ]]" ng-view autoscroll="true"></div>
<!-- Main JS -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/headerCtrl.js"></script>
<script src="js/controllers/modal.js"></script>
<script src="js/controllers/ResonanceCtrl.js"></script>
<script src="js/controllers/ContactCtrl.js"></script>
<script src="js/controllers/LandingCtrl.js"></script>
<script src="js/controllers/SignInCtrl.js"></script>
<!-- Directives -->
<!-- <script src="js/directives/LandingAnimation.js"></script> -->
<script src="js/jq.js"></script>
</body>
</html>
Landing Page HTML
<div class="col-xs-12 col-sm-12 col-md-5">
<div class="caption">
<h1 class="text-left h-color thin">
Text Header
</h1>
<p class="lead p-color">More Text</p>
<!-- Here is my Toggle Button --> <a class="lead p-color learn-button togglebtn shake shake-rotate" data-ng-click="isCollapsed = !isCollapsed">
<small>
<i class="glyphicon" data-ng-class="{'glyphicon-minus': status.open, 'glyphicon-plus': !status.open}"></i> Learn More
</small>
</a>
</div>
</div>
<div class="hidden-xs hidden-sm col-md-7 col-lg-offset-1 col-lg-6">
<img alt="Image" class="img-responsive center-block" src="images/kip-animation.png" />
</div>
<!--Here is the what I want to collapse -->
<div id="myContent" collapse="isCollapsed" class="row row-offset row-pad" style="margin: 0 30px">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 1</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"><small>Text</small>
</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 2</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"><small>Text</small>
</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 3</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"> <small>Some Text</small>
</p>
</div>
</div>
</div>
<!-- END DROPDOWN-->
App Javascript
var app = angular.module('app', ['ui.bootstrap', 'ngRoute', 'ngAnimate']);
app.config(function($interpolateProvider, $routeProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
$routeProvider
.when('/', {
templateUrl : 'pages/LandingPage.html',
controller : 'LandingCtrl'
})
.otherwise({ redirectTo: '/signin'});
});
Controller Javascript
app.controller('LandingCtrl', function($scope) { // jshint ignore:line
$scope.pageClass = 'page-landing';
$scope.isCollapsed = true;
});

I solved the issue. I was using Jquery before to toggle the display either hidden or shown.
In my Css I had:
myContent {
display: none;
}
Once I deleted that. It worked perfectly fine.

Resources