I need to add dynamic template on click for that i have used :
var action_template='';
app.controller('EventCtrl',function($rootScope){
action_template = action_template +'<ul><li><a ui-sref="/root/authenticate"><img src="default.png"></a></li></ul>';
$rootScope.template=action_template;
});
In html:i have used ngSanitize
<ul>
<li ng-bind-html="template"></li>
</ul>
template is appending perfectly but there is no href link.
what I am doing wrong ? Or is there any solution for doing the same thing ?
The main problem was unable to add any angular directives such as ng-click, ng-href, ui-sref etc.
But after adding $sce.trustAsHtml it is adding ui-sref but not adding any hyperlink.
Hint will be appreciable.
Thanks
I think you forgot trustAsHtml in your controller(you can see in the snippet after running, that ui-sref is present in the source):-
var app = angular.module("myApp", []);
var action_template='';
app.controller("myCtrl", function($scope,$rootScope,$sce) {
action_template = action_template +'<ul><li><a ui-sref="/root/authenticate">Link</a></li></ul>';
$rootScope.template=$sce.trustAsHtml(action_template);
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-bind-html="template"></li>
</ul>
</div>
You need trust your HTML, using $sce, Try below code
var jimApp = angular.module("mainApp", []);
jimApp.controller('EventCtrl',function($rootScope, $sce, $scope){
var action_template='';
action_template = action_template +'<ul><li><a ui-sref="/root/authenticate"><img src="default.png" alt="Default image">Link</a></li></ul>';
$scope.template=$sce.trustAsHtml(action_template);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="EventCtrl">
<ul>
<li ng-bind-html="template"></li>
</ul>
</div>
Related
I am trying to call one angular js function using controller. I am using code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DevPortal</title>
<script src="js/angular.min.js"></script>
<script src="js/controllers/app.js"></script>
</head>
<body ng-app="devportal">
<div ng-include="'templates/login_menu.html'"></div>
</body>
</html>
app.js
var app = angular.module('devportal', []);
app.controller('AppController', function($scope, $http) {
return{
getuserloginmenu : function(){$http.get('/getuserloginmenu').then(function(response){$scope.loginmenu=response.data;})},
getuserloginmenu1 : function(){$http.get('/getuserloginmenu1').then(function(response){$scope.loginmenu1=response.data;})}
};
});
login_menu.html
<div ng-controller="AppController as ctrl">
<div on-init="ctrl.getuserloginmenu()">
<p ng-repeat="menu in loginmenu">{{menu}}</p>
</div>
</div>
My rest service is working properly and returns String array. I am not able to call/get the rest service data in html.
Your code seems legit, the only thing making noise (at least for me) is the on-init you added to call the function. I think that's the problem.
Try
<div ng-controller="AppController as ctrl">
<div ng-init="ctrl.getuserloginmenu()">
<p ng-repeat="menu in loginmenu">{{menu}}</p>
</div>
</div>
And maybe.. To keep it clean: Change the syntax of the controller (even if it works)
var app = angular.module('devportal', []);
app.controller('AppController', function($scope, $http) {
$scope.getuserloginmenu = function(){$http.get('/getuserloginmenu').then(function(response){$scope.loginmenu=response.data;})};
$scope.getuserloginmenu1 = function(){$http.get('/getuserloginmenu1').then(function(response){$scope.loginmenu1=response.data;})};
});
Edit:
That's a missuse of ng-init. I'll leave the documentation of Angular for that matter
https://www.w3schools.com/angular/ng_ng-init.asp
But shortly, you want $scope.loginmenu to populate. You don't need to wait until the div loads. You can populate $scope.loginmenu right away when the controller inits.
View
<div ng-controller="AppController as ctrl">
<div>
<p ng-repeat="menu in loginmenu">{{menu}}</p>
</div>
</div>
Controller
var app = angular.module('devportal', []);
app.controller('AppController', function($scope, $http) {
$scope.getuserloginmenu = function(){$http.get('/getuserloginmenu').then(function(response){$scope.loginmenu=response.data;})};
$scope.getuserloginmenu1 = function(){$http.get('/getuserloginmenu1').then(function(response){$scope.loginmenu1=response.data;})};
$scope.getuserloginmenu();
});
I have a problem. In my html file I have a following content:
<div ng-controller='nav'>
<ul >
<li ng-show="sh" >
<a ui-sref="problems">name</a>
</li>
</div>
My controller is:
app.controller('nav', function($scope, $state, $http){
$(function(){
$scope.sh=true;
//$http.get('something');
});
});
If
$http.get('something')
is commented, ng-show does not work. However, if I uncomment it, it starts to work. I cannot understand the reason of this. Did you have a similar problem?
Try this below code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div ng-controller='nav'>
<ul>
<li ng-show="sh">
<a ui-sref="problems">name</a>
</li>
</ul>
</div>
<script src="../lib/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('nav', function ($scope, $state, $http) {
$scope.sh = true;
$http.get('something')
});
</script>
</body>
</html>
I dont know why you included the jquery part. It is always good to not to use jquery in AngularJS projects. You will get almost all things in AngularJS one way or the another.
There is no need for jquery function there you can directly use $scope.sh=true;
The following code works.
<body ng-app="" ng-init="names=['a','b']">
<ul ng-repeat="x in names">
<li >
{{ x }}
</li>
</ul>
</body>
but as soon I add a value to ng-app (say ng-app="myApp"), it stops working. Anyone would know why?
Because, you told angular by specifying name, that in this page all objects definitions and details which I am going to use is defined in a module called my app. Angular Search for it and does not find.
when you specify the ng-app you should specify the app definition, controller you can initialize these values from ng-init.
<html>
<body>
<div ng-app="myapp" controller="MyController">
<span>{{personname}}</span>
</div>
<script>
// this will setup the myapp
var app = angular.module('myapp', []);
app.controller('MyController',function(){
$scope.personname='tammi';
});
</script>
</body>
</html>
You will need to create a separate "app.js" (don't forget to reference it inside script tags in the html(view)) file and create an angular module and assign it to the global variable "myApp":
var myApp = angular.module("myApp", []);
Then create a controller that will expose the data to the view via the $scope service:
myApp.controller("MyCtrl", function($scope){
$scope.names = ['a', 'b'];
}
In the view, do the following:
<body ng-app="myApp" ng-controller="MyCtrl">
<ul ng-repeat="x in names">
<li >
{{ x }}
</li>
</ul>
</body>
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);
});
Having trouble getting a simple sortable demo for angular-ui going here- http://jsfiddle.net/B3YDr/:
<div ng-app="myApp" ng-controller="myCtrl">
<ul ng-model="items" ui-sortable>
<li ng-repeat="item in items">{{item}}</li>
</ul>
<pre>{{items}}</pre>
</div>
angular.module('myApp', ['ui']);
var myCtrl = function($scope) {
$scope.items = ['One','Two','Three'];
};
Included jQuery & jQueryUI
Included AngularJS
Included AngularUI
Added 'ui' module as a dependency
I've copied the sample code almost like-for-like here http://angular-ui.github.io/#directives-sortable but still can't reorder list items.
Can anyone point out what is wrong? Thanks
You need to control the import order of scripts:
http://jsfiddle.net/B3YDr/4/
Put jquery before angular for angular to use it as element service.
<div ng-app="myApp" ng-controller="myCtrl">
<ul ng-model="items" ui-sortable>
<li ng-repeat="item in items">{{item}}</li>
</ul>
<pre>{{items}}</pre>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.2.0/ui-bootstrap-tpls.js"></script>
you can use methods in sortableOptions like below code
$scope.sortableOptions = {
handle: '.custom-ctrl-handle',
stop: function(e, ui) {
// console.log("stop function worked");
}
};