I have a problem with my tooltip.
I have something like this
<span uib-tooltip="{{displayName()}}"></span>
and in js file
function displayName() {
return '<div>' +
name +
'div' +
'<b>something</b>'
}
So I have escape characters and I don't know how to deal with it. Obviously, I would like to display in my tooltip properly code, without
"div" etc.
How can I deal with it? I know that earlier we can use tooltip-html-unsafe, but it's deprecated now.
Parse the HTML as safe using the $sce service and use uib-tooltip-html as specified in the ui-bootstrap docs.
In HTML:
<span uib-tooltip-html="displayName()"></span>
In controller:
app.controller("AppCtrl", function ($scope, $sce) {
$scope.displayName = function () {
return $sce.parseAsHtml('<div>' + name + '</div><b>something</b>');
}
});
I'm not sure if this is what you want, but
You can have a tooltip with a template, which will parse / compile your HTML for you. You would need to use uib-tooltip-template. Here is a demo:
var app = angular.module('myApp', ["ui.bootstrap"]);
app.controller('myCtrl', function($scope) {
$scope.name = "'Any name'";
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<span uib-tooltip-template="'tooltipTemplate.html'" tooltip-placement="bottom">Tooltip with a template</span>
<!-- separate file -->
<script type="text/ng-template" id="tooltipTemplate.html">
<div>
{{name}}
</div>
<b>something else</b>
</script>
</div>
</body>
</html>
Simply installing ngSanitize and including it in your app will allow you to use uib-tooltip-html (rather than uib-tooltip) without worrying about safety.
https://docs.angularjs.org/api/ngSanitize
After installing, you can include it in your app:
var app = angular.module('myApp', [...,'ngSanitize']);
And of course, make sure you include the plugin in your build files. Personally, this allowed me to replace a lot of old unsafe tooltips very easily during upgrades from previous versions.
Related
I am just wondering is there any better way to approach same kind of logic as below. 4 buttons onclick of it have to send parameters like (english, german, spanish, french) to angular function. Is there any possibility to reduce repetition of code here by using model binding or array or enum??
Even following approach may or may not be the best way to handle it. Since I am not that proficient in angular I am not sure about better alternative approach. Please advice.
Basically is there any way to implement same logic in a better way??
Note: I am using angular 1.7.2 version
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('myController', ['$scope', function($scope) {
$scope.Language = 'German';
$scope.Preference = function(lang) {
$scope.Language = lang;
};
}]);
</script>
</head>
<body>
<h2>Attach functions or behavior - AngularJS</h2>
<div ng-app="app" ng-controller="myController">
Click
<button ng-click="Preference('English')">English</button>
<button ng-click="Preference('German')">German</button>
<button ng-click="Preference('Spanish')">Spanish</button>
<button ng-click="Preference('French')">French</button>
<p>I like {{ Language}}</p>
</div>
</body>
</html>
You can use ng-repeat for the buttons and an array for the values. Also you can avoid using function by using ng-click to set the selected value:
<button ng-repeat="lan in vm.languages" ng-click="vm.Preference(lan)">{{lan}}</button>
Check a demo: DEMO
I'm trying to use angular-spinner with Angular JS 1.5.x in Chrome and every thing I try, every Plunker I find (even the one linked to the project page) fails with one error or another.
One discussion I found said I shouldn't load spin.js myself in a <script> tag but if I don't, how is it supposed to be loaded? When I don't I get an error that Spinner (or i in the minimized code) isn't a constructor. I feel like I must be missing something obvious but I've been searching and testing for hours and I don't feel any closer to a solution.
I actually don't care if I use this package, I just want a spinner so if angular-spinner is deprecated and there is a working alternative, I'm happy for the pointer. Thanks.
Use version 2 of spin.js:
<script type="text/javascript" src="//unpkg.com/angular/angular.js"></script>
<script type="text/javascript" src="//unpkg.com/spin.js#2"></script>
<script type="text/javascript" src="//unpkg.com/angular-spinner"></script>
The DEMO
var app = angular.module('myapp', ['angularSpinner']);
app.controller('MyController', ['$scope', 'usSpinnerService', '$rootScope',
function($scope, usSpinnerService, $rootScope) {
$scope.startcounter = 0;
$scope.startSpin = function() {
if (!$scope.spinneractive) {
usSpinnerService.spin('spinner-1');
$scope.startcounter++;
}
};
$scope.stopSpin = function() {
if ($scope.spinneractive) {
usSpinnerService.stop('spinner-1');
}
};
$scope.spinneractive = false;
$rootScope.$on('us-spinner:spin', function(event, key) {
$scope.spinneractive = true;
});
$rootScope.$on('us-spinner:stop', function(event, key) {
$scope.spinneractive = false;
});
}
]);
<script type="text/javascript" src="//unpkg.com/angular/angular.js"></script>
<script type="text/javascript" src="//unpkg.com/spin.js#2"></script>
<script type="text/javascript" src="//unpkg.com/angular-spinner"></script>
<body ng-app="myapp" ng-controller="MyController">
<h1>Hello Spinner!</h1>
<input type="button" ng-click="startSpin()" value="Start spinner" />
<input type="button" ng-click="stopSpin()" value="Stop spinner" />
<br />Spinner active: {{spinneractive}}<br />Started: {{startcounter}} times<br />
<span us-spinner="{radius:30, width:8, length: 16}" spinner-key="spinner-1"></span>
</body>
There's a bug: https://github.com/urish/angular-spinner/issues/26 spinner keys won't work as intended.
What worked for me was registering every spinner in an array: when you call .spin(spinnerName) just add {spinnerName: true} to some controller's array, when you call stop(spinnerName) change it to {spinnerName: false}. Then show/hide the spinner with ng-if based on an expression like ng-if="mySpinners['spinnerName'] == true"
It works normally, but doesn't work after an ngClick.
Why is this?
How should this be dealt with if you do want it to work after an ngClick?
It actually works in the snippet below, but doesn't work in this Plunker, and also doesn't work in my app.
It also never works more than once in any of the three places, and I don't know why that is.
angular
.module('app', ['ui.bootstrap'])
.controller('MainController', MainController)
;
function MainController() {
var vm = this;
vm.updateSuccess = false;
vm.closeUpdateSuccess = function() {
console.log('closeUpdateSuccess');
vm.updateSuccess = false;
};
vm.submit = function() {
vm.updateSuccess = true;
};
}
<!DOCTYPE html>
<html ng-app='app'>
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="ui-bootstrap#0.13.3" data-semver="0.13.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js'></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller='MainController as vm'>
<alert ng-show='vm.updateSuccess' type='success' close='vm.closeUpdateSuccess()' dismiss-on-timeout='2000'>
Successfully updated!
</alert>
<h1>Test Text</h1>
<button ng-click='vm.submit()'>Submit</button>
</div>
</body>
</html>
The problem is you are not using the alert directive correctly. It is working as designed and you can see this by looking at the console in your browser. When the page is rendered, two seconds later your logging statement is executed. The alert directive doesn't know or care whether or not it is visible. Angular will execute the directive when it is added to the DOM. For ng-show as you are using, it is only ever added once. You could use ng-if to achieve the desired behavior or, as I say below, ng-repeat if you want the ability to display multiple alerts.
Look at our examples here and see how we're using an array to store them and the HTML code to display them via an ng-repeat.
your are using angular-ui but you are trying to execute native javascript function, try to use the angular in your js file.1 So you need to implement it with so that directive could call it,
<alert type="danger" close='closeUpdateSuccess()' ng-if="show"
dismiss-on-timeout="2000">Something happened.</alert>
and in controller:
$scope.show = true;
$scope.closeUpdateSuccess() = function(index) {
$scope.show = false;
};
i am learning angular js.from this site https://docs.angularjs.org/api/ng/function/angular.bootstrap it is saying Use this function to manually start up angular application.
<html>
<body>
<div ng-controller="WelcomeController">
{{greeting}}
</div>
<script src="angular.js"></script>
<script>
var app = angular.module('demo', [])
.controller('WelcomeController', function($scope) {
$scope.greeting = 'Welcome!';
});
angular.bootstrap(document, ['demo']);
</script>
</body>
</html>
what is the meaning of this line angular.bootstrap(document, ['demo']); ?
the above program just create a module and controller but it use bootstrap.......without bootstrap controller can not be instantiated ?.
looking for guidance. thanks
angular.bootstrap is used as an alternative approach to initializing your application without using ng-app. In the above example, you can see that there is no ng-app directive added anywhere in the document. Therefore, using angular.bootstrap you defined the app module to be associated with the document which is demo in the above example.
You can also define the modules to be used with any element that can be identified by using document.getElementById() function in the first parameter of angular.bootstrap.
Using angular.bootstrap
<html>
<body>
<div class="mycontainer" ng-controller="WelcomeController">
{{greeting}}
</div>
<script src="angular.js"></script>
<script>
var app = angular.module('demo', [])
.controller('WelcomeController', function($scope) {
$scope.greeting = 'Welcome!';
});
angular.bootstrap(document.getElementById('mycontainer'), ['demo']);
</script>
</body>
For running multiple apps in an HTML document you need to manually bootstrap them using angular.bootstrap
I am displaying a string that has HTML code in it:
<div style="font-size: 14px" ng-bind="currentBook.description"></div>
put it displays the HTML code instead of interpreting the elements:
When I use ng-bind and ng-bind-unsafe, it shows nothing.
How can I get the HTML to be parsed?
Addendum
I added a reference to sanitize but ng-bind and ng-bind-unsafe still show nothing:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-sanitize.js"></script>
Ok, I added the ngSanitize var app = angular.module('app', ['ngSanitize']); and now it works.
It looks like you missed ngSanitize please see demo below
You can find more here
https://docs.angularjs.org/api/ngSanitize/service/$sanitize
var app = angular.module('app', ['ngSanitize']);
app.controller('firstCtrl', function($scope, $sce) {
$scope.currentBook = {
description: "<p>some description</p>"
};
});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-sanitize.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
<div style="font-size: 14px" ng-bind-html="currentBook.description"></div>
</div>
</body>
call apply
$scope.$apply(function () {
$scope.currentBook.description = $sce.trustAsHtml(html);
});