Hello I am developing Angularjs Application. I am trying to display Toaster messages in my angular controller. I refereed http://angular-js.in/angular-toastr/. I am facing below issue. I am not able to call success,info etc notification from controller and i am getting annot read property 'success' of undefined error. I have tried as below.
In index.html i have added below code.
<!--Toaster-->
<script src="https://unpkg.com/angular-toastr/dist/angular-toastr.tpls.js"></script>
<link rel="stylesheet" href="https://unpkg.com/angular-toastr/dist/angular-toastr.css" />
<!--Toaster-->
this is my main.js
var app = angular.module('RoslpApp', ['pascalprecht.translate', 'ui.router', 'toastr']);
app.config(function ($stateProvider, $urlRouterProvider, $urlRouterProvider, $translateProvider, $translatePartialLoaderProvider) {
//ui-routing states here});
app.controller('RoslpAppController', ['$scope', '$translate', function ($scope, $translate, toastr) {
toastr.success('Hello world!', 'Toastr fun!');
$scope.clickHandler = function (key) {
$translate.use(key);
};
}]);
May I know why I am facing issues here? any help would be appreciated. thank you
add toastr as string dependency to the controller.
change this
app.controller('RoslpAppController', ['$scope', '$translate',function ($scope, $translate, toastr) {
to this
app.controller('RoslpAppController', ['$scope', '$translate','toastr',function ($scope, $translate, toastr) {
You are missing toastr in controller definition.
app.controller('RoslpAppController', ['$scope', '$translate','toastr', function ($scope, $translate, toastr) {
Try this
<html>
<head>
<script Src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css">
<script>
var app=angular.module("myapp", []);
app.controller("namesctrl", function($scope){
$(function () {
$('#error').click(function () {
// make it not dissappear
toastr.error("Noooo oo oo ooooo!!!", "Title", {
"timeOut": "0",
"extendedTImeout": "0"
});
});
$('#info').click(function () {
// title is optional
toastr.info("Info Message", "Title");
});
$('#warning').click(function () {
toastr.warning("Warning");
});
$('#success').click(function () {
toastr.success("YYEESSSSSSS");
});
});
});
</script>
</head>
<body ng-app="myapp" ng-controller="namesctrl">
<input type="button" value="Error" id="error" />
<input type="button" value="Info" id="info" />
<input type="button" value="Warning" id="warning" />
<input type="button" value="Success" id="success" />
<br><br><br><br>
See official example: <a href='http://codeseven.github.io/toastr/demo.html' target='blank'>Here</a>
</body>
</html>
Related
I am implementing checkbox and also I want to set status(true, false) in url as a parameter But only false value is set in url parameter. But When I click on checkbox then true value is not set in url as a parameter. I am using $location.search. I not able to find out what is the issue with true value.
var app = angular.module('demo', ['rzModule', 'ui.bootstrap']);
app.controller('MainCtrl', function($scope, $rootScope, $timeout) {
$scope.confirm = function(){
alert($scope.checkboxModel.value);
$location.search({checkbox: $scope.checkboxModel.value});
}
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
<div ng-app="demo">
<div ng-controller="MainCtrl" class="wrapper">
checkbox status should set in url as parameter
<label>
<input type="checkbox" ng-model="checkboxModel.value" data-ng-change="confirm()"/>
</label>
</div>
</div>
Try to emit the locationChangeSuccess event manually. and also You missed to inject $location in the controller.
var app = angular.module('demo', ['rzModule', 'ui.bootstrap']);
app.controller('MainCtrl', function($scope, $rootScope, $timeout, $location) {
$scope.confirm = function() {
alert($scope.checkboxModel.value);
$location.search({
checkbox: $scope.checkboxModel.value
});
$scope.$emit('$locationChangeSuccess');
console.log($location.search());
}
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
<div ng-app="demo">
<div ng-controller="MainCtrl" class="wrapper">
checkbox status should set in url as parameter
<label>
<input type="checkbox" ng-model="checkboxModel.value" data-ng-change="confirm()"/>
</label>
</div>
</div>
Did you check your browser's console for errors? You missed to inject $location.
var app = angular.module('demo', ['rzModule', 'ui.bootstrap']);
app.controller('MainCtrl', function($scope, $rootScope, $timeout, $location) {
$scope.confirm = function(){
$location.search({checkbox: $scope.checkboxModel.value});
}
})
Use this.
I am having trouble with two way data binding, I fetch an array of objects from the controller and when I make another request trying to submit part of the data, It goes back and is undefined in the controller when I use console.log,
The app uses AngularJS 1.5.8 and angular-route
Can someone please help me figure out why the console.log in the register scope function logs undefined instead of the names. The code
My index file:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src='lib/angular.min.js'></script>
<script type="text/javascript" src='lib/angular-route.js'> </script>
<script type="text/javascript" src='app.js'></script>
<script type="text/javascript" src='controllers.js'></script>
<title></title>
</head>
<body ng-app='myApp'>
<div ng-view>
</div>
</body>
</html>
The partial I am using is home.html:
<section ng-controller='MyCtrl'>
{{test}}
<form>
<input type="text" name="test" ng-model='post'>
<input type="submit" name="sub" value="post" ng-click='getdata()'>
</form>
<table ng-repeat='i in list'>
<tr>
<td>{{i.name}}</td>
<td>{{i.job}}</td>
<form>
<input type="text"
name="regname" value='{{i.name}}' \ng-model='{{i.name}}' hidden>
<td><input type="submit" name="sub2" ng-click='register()'></td>
</form>
</tr>
</table>
</section>
The app is declared in app.js:
(function () {
// body...
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'MyCtrl'
}).when('/home', {
templateUrl: 'home.html',
controller: 'MyCtrl'
})
})();
The controller code is in controllers.js:
var app = angular.module('myApp');
app.controller('MyCtrl',
['$scope', '$http', function ($scope, $http) {
// body...
$scope.test = 'the test is running';
$scope.getdata = function(){
var item = $scope.post;
console.log(item);
$scope.list = [{'name': 'shem', 'job':'engineer'},
{'name': 'Reinhard', 'job': 'devops'}]
}
$scope.register = function(){
console.log($scope.regname);
}`enter code here`
}]);
Because you are using
console.log($scope.regname);
that isn't existing in your scope. In fact, in your HTML you have
<input type="text" name="regname" value='{{i.name}}' \ng-model='{{i.name}}' hidden>
But regname is only the name of the input, not a binding to your scope.
The solution
Replace your ng-click register() with:
<input type="submit" name="sub2" ng-click="register(i.name)">
and then your register function should be:
$scope.register = function(name){
console.log(name);
}
P.S.
No need to use {{}} brackets in ng-model (ng-model='{{i.name}}'). Replace it with
ng-model="i.name" as shown in the docs.
I have been attempting to get angular routing working and everytime I create a new project and It does not work. I have had it working in some projects but I can never see why my newly created project does not work.
Its probably something obvious, thanks for any help in advance.
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/Styles.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
</head>
<body>
<a href="#/">
<button class="btn btn-danger">Homepage</button></a>
<a href="#/about">
<button class="btn btn-success">About</button></a>
<a href="#/date">
<button class="btn btn-warning">Date</button></a>
<div class="row">
<div ng-view>
</div>
</div>
<script src="SinglePageApp/app.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</body>
</html>
app.js file
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
//default page
.when('/', {
templateUrl: "pages/homepage.html",
controller: 'HomeCtrl'
})
//about page
.when('/about', {
templateUrl: "pages/about.html",
controller: 'AboutCtrl'
})
//date page
.when('/date', {
templateUrl: "pages/date.html",
controller: 'DateCtrl'
});
});
app.controller('HomeCtrl', ['$scope', function ($scope) {
$scope.homepage = "Homepage";
}]);
app.controller('AboutCtrl', ['$scope', function ($scope) {
$scope.about = "Lorem ipsum............";
}]);
app.controller('DateCtrl', ['$scope', function ($scope) {
$scope.dateNow = new Date();
}]);
Try this plunker:
http://embed.plnkr.co/L6E4GCe3O0Jh1vqKyGFD/
I've used the example at the angularJS documentation to create your usecase.
You should change the template filepaths, with your own. I also haven't included bootstrap.
If you want to use buttons, then you can use this example in plunkr based on this answer by Josh David Miller(upvote him if you use his directive). Directives are a way to customize html, and here we're using one as an html attribute (you can also use them as standalone elements) to create a hyperlink button.
Here's fiddle for you that works as expected
Not sure why your code is not working, angular has pretty bad debugging tool.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.js"></script>
<div>
<a href="#/">
<button class="btn btn-danger">Homepage</button>
</a>
<a href="#/about">
<button class="btn btn-success">About</button>
</a>
<a href="#/date">
<button class="btn btn-warning">Date</button>
</a>
<div class="row">
<div ng-view></div>
</div>
</div>
<script type="text/ng-template" id="pages/homepage.html">
{{homepage}}
</script>
<script type="text/ng-template" id="pages/about.html">
{{about}}
</script>
<script type="text/ng-template" id="pages/date.html">
{{dateNow}}
</script>
Script file looks like this
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
//default page
.when('/', {
templateUrl: "pages/homepage.html",
controller: 'HomeCtrl'
})
//about page
.when('/about', {
templateUrl: "pages/about.html",
controller: 'AboutCtrl'
})
//date page
.when('/date', {
templateUrl: "pages/date.html",
controller: 'DateCtrl'
})
.otherwise({redirectTo:'/'});
});
app.controller('HomeCtrl', ['$scope', function ($scope) {
$scope.homepage = "Homepage";
}]);
app.controller('AboutCtrl', ['$scope', function ($scope) {
$scope.about = "Lorem ipsum............";
}]);
app.controller('DateCtrl', ['$scope', function ($scope) {
$scope.dateNow = new Date();
}]);
angular.bootstrap(document.body, ['app']);
I am trying to make a modal which can be instantiated from multiple places in the app. from the example given here: Angular directives for Bootstrap the modal controller is in the same file as the controller who instantiates the modal. I want to separate the modal controller from the "app" controller.
index.html:
<!DOCTYPE html>
<html ng-app="modalTest">
<head>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-controller="modalTestCtrl">
<button ng-click="openModal()">Modal</button>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="modalTest.js"></script>
</body>
</html>
The controller:
var app = angular.module('modalTest', ['ui.bootstrap']);
app.controller('modalTestCtrl', ['$scope', '$modal', function($scope, $modal) {
$scope.openModal = function() {
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: 'modalCtrl',
size: 'sm'
});
}
}]);
// I want this in another JavaScript file...
app.controller('modalCtrl', ['$scope', function($scope) {
$scope.hello = 'Works';
}]);
modal.html:
<div ng-controller="modalCtrl">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<h1>{{hello}}</h1>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>
Is there any way to put the modalCtrl in another JavaScript file and somehow inject the controller (modalCtrl) into the modalTestCtrl ?
BR
Of course, you can do it. First of all you should use a function declaration.
// modalCtrl.js
// This file has to load before modalTestCtrl controller
function modalCtrl ($scope) {
$scope.hello = 'Works';
};
Then, change the modalTestCtrl like:
app.controller('modalTestCtrl', ['$scope', '$modal', function($scope, $modal) {
$scope.openModal = function() {
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: modalCtrl, //This must be a referance, not a string
size: 'sm'
});
}
}]);
With the changes above, you code has to work.
I'm new to angular and am trying to tweek the tutorial to my app. I'm trying to add routes to my app and it doesn't seem to be reading my templates or reading the controller correctly. I installed the angularJS extension for Chrome (pretty awesome by the way) and it shows my scope as empty, no models.
Here's my html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="bioSatApp">
<head>
<title>Map Test</title>
<script src="../lib/angular/angular.js"></script>
<script src="../lib/angular/angular-route.js"></script>
<script src="../resources/app.js"></script>
<script src="../resources/controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
Here's my app module (app.js):
var bioSatApp = angular.module('bioSatApp', [
'ngRoute',
'biosatAppControllers'
]);
bioSatApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/maptypes', {
templateURL: 'partials/mapType-list.html',
controller: 'MapListCtrl'
}).
when('/maptypes/:type', {
templateURL: 'partials/mapType-detail.html',
controller: 'MapTypeCtrl'
}).
otherwise({
redirectTo: '/maptypes'
});
}]);
Here's my controllers module (controllers.js):
var biosatAppControllers = angular.module('biosatAppControllers', []);
biosatAppControllers.controller('MapListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('../resources/maptypes.json').success(function (data) {
$scope.mapTypes = data;
});
}]);
biosatAppControllers.controller('MapTypeCtrl', ['$scope', '$routeParams',
function ($scope, $routeParams) {
$scope.type = $routeParams.type
}]);
Here's mapType-list.html:
<select onchange="location = this.options[this.selectedIndex].value;">
<option ng-repeat="map in mapTypes" value="#/maptypes/{{map.type}}">
{{map.caption}}
</option>
</select>
Here's mapType-detail.html:
<div>
{{type}}
<div id="legendContainer" style="width: 300px; height: 800px; overflow-y: auto; float: left;">Legend Div</div>
<div id="mapDiv" style="height:800px;">Map Div</div>
</div>
The maptypes.json is valid json and it loaded successfully before I tried to ngRoute.
When I run the code it successfully navigates the app to /maptypes (the otherwise statement in $routeProvider). But it doesn't bring up the mapType-list html, which should be a simple drop down list. I get no errors in my console or anywhere else that says something isn't loading correctly or something's not found. Also, when I run it the ng-view div element:
<div ng-view></div>
get's replaced with a comment:
<!-- ngView: -->
I'm sure it's something very simple that I'm missing or got wrong, but I've looked through the code over and over and I can't look at it anymore.
Try changing your app config to
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
//Your routing here...
Also add <base href="/"> to head of your HTML file.
Here the example I did using the same code
sample1.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="bioSatApp">
<head>
<title>Test</title>
</head>
<body>
<div ng-view></div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="app1.js"></script>
<script src="controllers.js"></script>
</body>
</html>
With app1.js I did different of you because I deleted 2 lines from here:
var bioSatApp = angular.module('bioSatApp', [
'ngRoute',
'biosatAppControllers'
]);
'ngRoute'
'biosatAppControllers'
and also I changed templateURL for templateUrl
This is the result without the 2 lines:
var bioSatApp = angular.module('bioSatApp', []);
bioSatApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/maptypes', {
templateUrl: 'templates/mapType-list.html'
}).
when('/maptypes/:type', {
templateUrl: 'templates/mapType-detail.html',
controller: 'MapTypeCtrl'
}).
otherwise({
redirectTo: '/maptypes'
});
}]);
All the others files are the same