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.
Related
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',[])
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.
I'm creating popovers with angular-strap using the $popover service like this:
this.popover = $popover(this.element, {
title: 'popover title',
content: 'popover content',
trigger: 'hover',
container: 'body',
html: true
});
This renders correctly:
However, when I try to destroy the popover, it doesn't remove it completely because when I hover over the element, it shows this:
I've tried separately both of the following lines of code which produce the same empty popover result:
this.popover.destroy();
this.popover.$scope.$destroy();
What am I doing wrong?
I tried and its working fine for me, you can refer the plnkr here: http://plnkr.co/edit/KyioKkQhxZDfUnQ0jn2E?p=preview
// HTML code
<!DOCTYPE html>
<html ng-app="mgcrea.ngStrapDocs">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/4.3.0/css/font-awesome.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/libs.min.css">
<link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/docs.min.css">
<link rel="stylesheet" href="style.css" />
<script src="//cdn.jsdelivr.net/angularjs/1.4.5/angular.min.js" data-semver="1.4.5"></script>
<script src="//cdn.jsdelivr.net/angularjs/1.4.5/angular-animate.min.js" data-semver="1.4.5"></script>
<script src="//cdn.jsdelivr.net/angularjs/1.4.5/angular-sanitize.min.js" data-semver="1.4.5"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.3.7"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.3.7"></script>
<script src="//mgcrea.github.io/angular-strap/docs/angular-strap.docs.tpl.js" data-semver="v2.3.7"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="bs-docs-section" ng-controller="PopoverDemoCtrl">
<div class="bs-example" style="padding-bottom: 24px;" append-source>
<!-- A popover can also be triggered programmatically using the $popover service -->
<button type="button" id="popover-as-service" class="btn btn-lg btn-primary" title="{{popover.title}}" ng-click="togglePopover()">Click to toggle popover
<br />
<small>(using $popover service)</small>
</button>
<div><a ng-click="hidePopover()">Click to close</a></div>
</div>
</div> </body>
</html>
// JS code
var app = angular.module('mgcrea.ngStrapDocs', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap']);
app.controller('MainCtrl', function($scope) {
});
'use strict';
angular.module('mgcrea.ngStrapDocs')
.config(function($popoverProvider) {
angular.extend($popoverProvider.defaults, {
html: true
});
})
.controller('PopoverDemoCtrl', function($scope, $popover) {
$scope.popover = {title: 'Title', content: 'Hello Popover<br />This is a multiline message!'};
var asAServiceOptions = {
title: $scope.popover.title,
content: $scope.popover.content,
trigger: 'manual'
}
var myPopover = $popover(angular.element(document.querySelector('#popover-as-service')), asAServiceOptions);
console.log(myPopover);
$scope.togglePopover = function() {
myPopover.$scope.$show();
};
$scope.hidePopover = function() {
myPopover.destroy();
};
});
Or may be if you are still facing some issue, you can create a plnkr and share.
can anyone please tell me what is wrong in this code? I am getting {{author.name}} as output on my browser. Browser error says angular is not defined and failed to instantiate the module AuthorApp
<!DOCTYPE html>
<html ng-app="AuthorApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script src="Authors.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
</head>
<body >
<div ng-controller="MyController">
<ul>
<li ng-repeat="author in authors">
{{author.name}}
</li>
</ul>
</div>
</body>
</html>
Author.js code
var AuthorApp = angular.module('AuthorApp', []);
AuthorApp.controller("MyController", function ($scope) {
$scope.authors = [
{ 'name': 'Xyz' },
{ 'name': 'abc' }
];
});
authors.js will be executed first and then angular will be loaded. Change the order of your scripts
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js">
<script src="Authors.js"></script>
</head>
The previous answer was correct, but I can't comment yet. I put your code in a plunk with the script order corrected and it works fine:
http://plnkr.co/edit/kIb0y2?p=preview
Do you have the path to the Author.js file correct? It needs to be in the same directory for referencing it without any other path info to work. Test to see if it is loading by putting an alert at the top of the file. If you don't get the alert, tinker with the path in the src attribute for the script until you get it.
//Author.js code
alert("Author.js file loaded!");
var AuthorApp = angular.module('AuthorApp', []);
AuthorApp.controller("MyController", function ($scope) {
$scope.authors = [
{ 'name': 'Xyz' },
{ 'name': 'abc' }
];
});
I want to use the angular application ngSanitize to use plain HTML in my application. I basically want to reproduce the functionality explained here in the docs but I want to lazy-load the module with ocLazyLoad. But for some reason I still get the error Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context indicating that ngSanitize was not load properly.
Did I do something wrong or is this a bug?
Here a minified example:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.js"></script>
<script src="ocLazyLoad.js"></script>
</head>
<body>
<div id="example" ng-app="LazyLoadTest" ng-controller="TestController">
<p ng-bind-html="myHTML"></p>
</div>
<script>
angular.module("LazyLoadTest", [ "oc.lazyLoad"])
.controller("TestController", function($scope, $ocLazyLoad, $compile){
$ocLazyLoad.load({
name: "ngSanitize",
files: ["angular-sanitize.js"],
serie: true
}).then(function () {
$scope.myHTML =
'I am an <code>HTML</code>string with ' +
'links! and other <em>stuff</em>';
}, function (e) {
console.log(e);
})
});
</script>
</body>
</html>
Here without using lazy loading:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.js"></script>
<script src="angular-sanitize.js"></script>
</head>
<body>
<div id="example" ng-app="LazyLoadTest" ng-controller="TestController">
<p ng-bind-html="myHTML"></p>
</div>
<script>
angular.module("LazyLoadTest", [ "ngSanitize"])
.controller("TestController", function($scope){
$scope.myHTML =
'I am an <code>HTML</code>string with ' +
'links! and other <em>stuff</em>';
});
</script>
</body>
</html>
See https://github.com/ocombe/ocLazyLoad/issues/176.
Apparently ngSanitizer is coupled too tightly into AngularJS to be lazy loaded.
Edit:
Note that this fact is now also mentioned in the FAQ.