angular js add alert ctrl is not working - angularjs

hi I am simply trying to get this to work but keep getting errors. when the button is clicked its supposed to add an alert to the screen.
var app = angular.module('ui.bootstrap')
angular.module('app').controller('messageCtrl', function ($scope) {
$scope.alerts = [
{ type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
{ type: 'success', msg: 'Well done! You successfully read this important alert message.' }
];
$scope.addAlert = function() {
$scope.alerts.push({msg: 'Another alert!'});
};
$scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="messageCtrl">
<div class="container">
<script type="text/ng-template" id="alert.html">
<div ng-transclude></div>
</script>
<div uib-alert ng-repeat="alert in alerts" ng-class="'alert-' + (alert.type || 'warning')" close="closeAlert($index)">{{alert.msg}}</div>
<div uib-alert template-url="alert.html" style="background-color:#fa39c3;color:white">A happy alert!</div>
<button type="button" class='btn btn-default' ng-click="addAlert()">Add Alert</button>
</div>


Please try this code.. Its working for me.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body ng-app="app" ng-controller="messageCtrl">
<div class="container">
<script type="text/ng-template" id="alert.html">
<div ng-transclude></div>
</script>
<div uib-alert ng-repeat="alert in alerts" ng-class="'alert-' + (alert.type || 'warning')" close="closeAlert($index)">{{alert.msg}}</div>
<div uib-alert template-url="alert.html" style="background-color:#fa39c3;color:white">A happy alert!</div>
<button type="button" class='btn btn-default' ng-click="addAlert()">Add Alert</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
// var app = angular.module('ui.bootstrap')
angular.module('app',[]).controller('messageCtrl', function ($scope) {
$scope.alerts = [
{ type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
{ type: 'success', msg: 'Well done! You successfully read this important alert message.' }
];
$scope.addAlert = function () {
$scope.alerts.push({ msg: 'Another alert!' });
};
$scope.closeAlert = function (index) {
$scope.alerts.splice(index, 1);
};
});
</script>
</body>
</html>
The changes made are as below.
Commented this line as it doesnt make any sense.
var app = angular.module('ui.bootstrap')
Corrected the syntax for module.
angular.module('app',[])

Related

Angular translate not working.View is not updating when i add html in appendChild

I have attached plunker link for that.
This is my html
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-cookies.js"></script>
<script src="https://rawgithub.com/angular-translate/bower-angular-translate/master/angular-translate.min.js"></script>
<script src="https://rawgithub.com/angular-translate/bower-angular-translate-storage-cookie/master/angular-translate-storage-cookie.js"></script>
<script src="https://rawgithub.com/angular-translate/bower-angular-translate-loader-static-files/master/angular-translate-loader-static-files.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="someController">
<div id="parent">
<h1>{{'HEADLINE' | translate }}</h1>
<button ng-click="switchLanguage('de_DE')" translate="LANG_DE_DE"></button>
<button ng-click="switchLanguage('en_US')" translate="LANG_EN_US"></button>
<button id="myButton" class="float-right submit-button" ng-click="showDiv()" >Click here</button>
</div>
<script type="text/javascript">
</script>
<div id="hello">
<span name="new" id="newpage" style="display: none;">
<h1 class="xx">{{'HELLO'| translate }}</h1>
</span>
</div>
</body>
</html>
app.js
angular.module('myApp', ['pascalprecht.translate', 'ngCookies']);
angular.module('myApp').config(['$translateProvider',
function($translateProvider) {
var language = (window.navigator.userLanguage || window.navigator.language).toLowerCase();
console.log(language);
$translateProvider.registerAvailableLanguageKeys(['de_DE', 'en_US'], {
'en_US': 'en_US',
'en_UK': 'en_US',
'en': 'en_US',
'de': 'de_DE'
});
$translateProvider.useStaticFilesLoader({
prefix: 'lang_',
suffix: '.json'
});
$translateProvider.preferredLanguage('en_US');
// $translateProvider.use('de');
$translateProvider.useCookieStorage();
$translateProvider.fallbackLanguage("de_DE");
}
]);
angular.module('myApp').controller('someController', ['$scope', '$translate',
function($scope, $translate) {
$scope.switchLanguage = function(key) {
$translate.use(key);
};
$scope.showDiv = function()
{
var html = document.getElementById("newpage").innerHTML;
var container = document.createElement("span");
container.innerHTML = html;
document.getElementById("parent").appendChild(container);
}
}
]);
lang_de_DE.json
{
"HEADLINE": "Überschrift",
"LANG_DE_DE": "Sprache: Deutsch",
"LANG_EN_US": "Sprache: Englisch",
"HELLO" :"Neue Seite"
}
lang_en_US.json
{
"HEADLINE": "Headline!",
"LANG_DE_DE": "Lang: German",
"LANG_EN_US": "Lang: English",
"HELLO" :"New page"
}
In this New page text (show div function) wont update when i change language.
Plunker link https://plnkr.co/edit/1pBWUFZMbHx4zKzNRKzD?p=preview

Use ng-repeat, do not manipulate DOM inside the controller.
Change your span in something like this:
<span ng-repeat="div in divs">
<h1 class="xx">{{'NEWPAGE'| translate }}</h1>
</span>
and your showDiv function:
scope.divs = [];
$scope.showDiv = function()
{
$scope.divs.push({});
}
Updated plunker here.
You need clearly to think in a more angularjs way. DO NOT pollute your controller with jquery and dom manipulation code. That's not for what angularjs is for.
Read the docs on ng-repeat here.

How to remove "Error: [ng:areq] Argument 'OldController' is not a function, got undefined"?

I am new to learning AngularJs and stuck at this particular error. Can't seem to find the reason behind this error. Any help will be appreciated.
I am using AngularJs 1.2.
Please advise.
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body ng-app="Heirarchy">
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>
<script type="text/javascript">
var app = angular.module("Heirarchy",[]);
app.controller("ParentController",function($scope){
$scope.person = {greeted:false};
});
app.controller("ChildController",function($scope) {
$scope.sayHello = function(){
$scope.person.name="Blade";
$scope.person.greeted = true;
}
});
</script>
</body>
</html>

Update your code
Insert ng-app="your module name" in your html tag, and do not repeat ng-app in your app
<!doctype html>
<html ng-app="Heirarchy">
<head>
</head>
<body>
<div ng-controller="ParentController">
</div>
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("Heirarchy", []);
app.controller("ParentController", function ($scope) {
$scope.person = { greeted: false };
});
app.controller("ChildController", function ($scope) {
$scope.sayHello = function () {
$scope.person.name = "Blade";
$scope.person.greeted = true;
}
});
</script>
</body>
</html>

Angular modal service error - TypeError: modal.element.modal is not a function

I have problem with an angular modal service
My app.js includes:
angular.module('myApp', ['myApp.test', 'ui.bootstrap','smart-table''angularModalService','ngRoute','myApp.productInsert',...
test.js:
'use strict';
angular.module('myApp.test', ['angularModalService'])
.controller('ComplexController', [
'$scope', '$element', 'title', 'close',
function($scope, $element, title, close) {
$scope.name = null;
$scope.age = null;
$scope.title = title;
// This close function doesn't need to use jQuery or bootstrap, because
// the button has the 'data-dismiss' attribute.
$scope.close = function() {
close({
name: $scope.name,
age: $scope.age
}, 500); // close, but give 500ms for bootstrap to animate
};
// This cancel function must use the bootstrap, 'modal' function because
// the doesn't have the 'data-dismiss' attribute.
$scope.cancel = function() {
// Manually hide the modal.
$element.modal('hide');
// Now call close, returning control to the caller.
close({
name: $scope.name,
age: $scope.age
}, 500); // close, but give 500ms for bootstrap to animate
};
}]);
And then test.html
<div class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="close()" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">{{title}}</h4>
</div>
<div class="modal-body">
<p>Here's a more complex modal, it contains a form, data is passed to the controller
and data is returned from the modal.</p>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="Your Name" ng-model="name">
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">Age</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="inputPassword3" placeholder="Age" ng-model="age">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" ng-click="close()" class="btn btn-primary" data-dismiss="modal">OK</button>
<button type="button" ng-click="cancel()" class="btn">Cancel</button>
</div>
</div>
</div>
</div>
And the main page that opens modal windows
'use strict';
angular.module('myApp.ricetta2', ['ngRoute', 'angularModalService','ui.bootstrap'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/ricetta2', {
templateUrl: 'views/ricetta/ricetta2.html',
controller: 'CartForm'
});
}])
.controller('CartForm', ['$scope','ModalService', function($scope, ModalService) {
$scope.invoice = {
items: [{
qty: 10,
description: 'Pomodori',
cost: 'Kg'}, {
qty: 10,
description: 'Olio',
cost: 'litri'}, {
qty: 4,
description: 'Pasta',
cost: 'Kg'}]
};
$scope.addItem = function() {
$scope.invoice.items.push({
qty: 1,
description: '',
cost: ''
});
},
$scope.removeItem = function(index) {
$scope.invoice.items.splice(index, 1);
},
$scope.total = function() {
var total = 0;
angular.forEach($scope.invoice.items, function(item) {
total += item.qty * item.cost;
});
return total;
};
$scope.items = ['item1', 'item2', 'item3'];
$scope.productList = [];
$scope.showComplex = function() {
ModalService.showModal({
templateUrl: "views/test/test.html",
controller: "ComplexController",
inputs: {
title: "A More Complex Example"
}
}).then(function(modal) {
modal.element.modal();
modal.close.then(function(result) {
$scope.complexResult = "Name: " + result.name + ", age: " + result.age;
});
});
};
}]);
When I try to open Modal windows I have always an error on the page:
TypeError: modal.element.modal is not a function
at ricetta2.js:60
at processQueue (angular.js:13248)
at angular.js:13264
at Scope.$get.Scope.$eval (angular.js:14466)
at Scope.$get.Scope.$digest (angular.js:14282)
at Scope.$get.Scope.$apply (angular.js:14571)
at done (angular.js:9698)
at completeRequest (angular.js:9888)
at XMLHttpRequest.requestLoaded (angular.js:9829)(anonymous function) # angular.js:11655$get # angular.js:8596processQueue # angular.js:13256(anonymous function) # angular.js:13264$get.Scope.$eval # angular.js:14466$get.Scope.$digest # angular.js:14282$get.Scope.$apply # angular.js:14571done # angular.js:9698completeRequest # angular.js:9888requestLoaded # angular.js:9829
I have all the resources linked on the index.html:
<link rel="stylesheet"href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src="bower_components/angular-modal-service/dst/angular-modal-service.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
I'm very new to angularjs and I don't know the solution!!
Thanks all

I had same problem. Interchanging the script tags locations solved my problem. At first I had script tags in this sequence
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
Then I changed it to this.
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
Many times these things happen. Conflicts occur because of loading AngularJS before jQuery.

Hi here is the correct detailed solution from https://www.npmjs.com/package/angular-modal-service
I'm using a Bootstrap Modal and the dialog doesn't show up
Code is entered exactly as shown the example but when the showAModal() function fires the modal template html is appended to the body while the console outputs:
TypeError: undefined is not a function
Pointing to the code: modal.element.modal();. This occurs if you are using a Bootstap modal but have not included the Bootstrap JavaScript. The recommendation is to include the modal JavaScript before AngularJS.

The documentation is incorrect. I'm submitting a PR for the examples.
In the meantime change to this:
.then( function(modal)
{
modal.element.show();
});

angularModalService requires bootstrap js
You already loaded bootstrap.js and jquery.js
You have to load jquery.js first and then bootstarp.js and then angular.js .
So your resources linked in index.html should be..
<link rel="stylesheet"href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src="bower_components/angular-modal-service/dist/angular-modal-service.js"></script>

Yes you just need to put in order your external js apis
first -> jQuery.js second -> Boostrap.js -> Angular.js like this
<script src="../../resources/js/jquery.js" th:src="#{/resources/js/jquery.js}"></script>
<script src="../../resources/js/bootstrap.js" th:src="#{/resources/js/bootstrap.js}"></script>
<script src="../../resources/js/angular.js" th:src="#{/resources/js/angular.js}"></script>
<script src="../../resources/js/angular-modal-service.js" th:src="#{/resources/js/angular-modal-service.js}" ></script>
Sorry for this tag "th:src" I am using thymeleaf :)

Now i faced similar issue and it was fixed with adding below script files at the top of html.
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
src = "http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"

Loading image at the time of onclick event using angularjs is not working

I want to add data at the time of onclick event. Need to load image at the time of onclick event, after a small time interval add data. But my image is continuously loading. Any body give any suggestion.
My code is:
<!DOCTYPE html>
<head>
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script language="javascript">
function ContactController($scope) {
$scope.contacts = [];
$scope.items = [ ];
$scope.add = function() {
setTimeout(function() {
$scope.$apply(function() {
$scope.items[0].lateLoader = ' xxxx ';
});
}, 1000);
$scope.count=$scope.count+1;
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
}
}
</script>
</head>
<body >
<div ng-app="" ng-controller="ContactController">
<p>{{items.lateLoader}}
<i ng-hide="items.lateLoader"><img src="Filling broken ring.gif"></i>
</p>
{{ contacts.length }}
Content:<input type="text" ng-model="newcontact" />
<button ng-click="add()">Add</button>
<ul style="list-style-type: none;">
<li ng-repeat="contact in contacts"> <input name="" type="checkbox" value="">{{ contact }}</li>
</ul>
</div>
</body>
</html>

In your example I found a lot of mistakes. The HTML tag is not defined at the top, wrong use of angularJs and Angular module is not created properly etc.
I fixed all the mistakes. I hope it can help you.
Plunkr link: http://plnkr.co/edit/no8WOHdEc9wc3dHzzITv?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script >
angular.module("app",[]).controller('ContactController',['$scope',
function($scope) {
$scope.contacts = [];
$scope.items = [];
$scope.add = function() {
setTimeout(function() {
$scope.$apply(function() {
$scope.items.lateLoader = 'xxxx ';
});
}, 1000);
//$scope.count=$scope.count+1;
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
}
}
]);
</script>
</head>
<body >
<div ng-controller="ContactController">
<p>{{items.lateLoader}}
<i ng-hide="items.lateLoader">
<img src="https://encrypted-tbn1.gstatic.com
/images?q=tbn:ANd9GcQTaHe0F0J39SXbiRF43pz2wtyfD6kypCMrLxhWPkq9EACNgwO0iaMbJFM">
</i>
</p>
{{contacts.length}}
Content:<input type="text" ng-model="newcontact" />
<button ng-click="add()">Add</button>
<ul style="list-style-type: none;">
<li ng-repeat="contact in contacts">
<input name="" type="checkbox" value="">{{ contact }}
</li>
</ul>
</div>
</body>
</html>
And for more detail of angularJs please visit these links:(https://angularjs.org/)
(http://www.w3schools.com/angular/default.asp)

Starting with ui.bootstrap - parse error from angular

I just started to use ui-bootstrap module.
Here is my code, I think, I have imported everything right, no ?
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/angular.js"></script>
<script src="js/ui-bootstrap-tpls.js"></script>
</head>
<body ng-controller="MainCtrl">
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
<button class='btn btn-default' ng-click="addAlert()">Add Alert</button>
<script>
var mainApp = angular.module('mainApp', ["ui.bootstrap"]);
mainApp.controller('MainCtrl', function ($scope) {
$scope.alerts = [
{ type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
{ type: 'success', msg: 'Well done! You successfully read this important alert message.' }
];
$scope.addAlert = function() {
$scope.alerts.push({msg: 'Another alert!'});
};
$scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};
});
</script>
</body>
</html>
I have this error, when I click on Add Alert :
Error: [$parse:syntax] http://errors.angularjs.org/1.2.19/$parse/syntax?p0=alert.type&p1=is%20unex…20expecting%20%5B%3A%5D&p2=3&p3=%7B%7Balert.type%7D%7D&p4=alert.type%7D%7D
do you have any ideas, why ?
futhermore, alert div are not displayed, maybe I cannot display the template from ui-bootstrap ?
EDIT :
We should use this type="alert.type" rather than type="{{alert.type}}"

Im not sure if its in your orginal code but in line:
mainApp.controller('MainCtrl', function ($scope) {s
you have "s" on the end of line.

Resources