Angular version:1.3
I am trying to compile the html and generate the interpolated html. the ng-if code is getting commented out
html
<div ng-if="true">true</div>
I am using the above html as htmlTemplateDom
Controller
var htmlCompiledDom = $compile(htmlTemplateDom)($scope);
var div = angular.element("div#emailContent").append(htmlCompiledDom);
console.log(div.html());
Console
<!-- ng-if:true -->
So the problem is ng-if is getting commented out.
Someone help !!!!
I don't see any problems on $compile.
This example works just as expected, check if you're doing something different.
HTML:
<div ng-app="app" ng-controller="controller">
<div id="compile">
</div>
</div>
Javascript:
angular.module('app', [])
.controller('controller', function ($scope, $compile) {
var template = '<div ng-if="true">true</div>';
var content = $compile(template)($scope);
angular.element('div#compile').append(content);
});
If you want to execute it, take a look at this fiddle.
Related
I am using node and angularjs. I have a frame like page inside an ejs that is passed content to load into the includes dynamically.
<div ng-app="thisApp">
<div ng-controller='MainCtrl'>
{{ firstMessage }}
<div id='contentFromNode' ng-include='<%= pageContent %>'></div>
</div>
</div>
<script>
var thisApp = angular.module('thisApp', []);
thisApp.controller('MainCtrl', [ '$scope', function($scope) {
$scope.firstMessage = "Main Controller Working Fine";
}])
</script>
and then the passed content might be just an html page containing something like this:
<div ng-controller='NestedCtrl' id='content-type-container'>
{{ nestedMessage }}
</div>
<script>
thisApp.controller('NestedCtrl', [function(){
var nested = this;
nested.nestedMessage = "Nested Won't Work";
}])
</script>
So I have tried $scope within the NestCtrl instead of referencing this, I have tried moving the script tag above and below (ideally this get separated eventually anyway). I have tried aliasing the controllers, however my problem is the in registration of the controller itself as I get that great Error: [$controller:ctrlreg] error. The page is loading the content fine? Any ideas what I am doing wrong here?
Seems JQlite doesn't support this. You have to include jquery or lazy load the script. Refer
AngularJS: How to make angular load script inside ng-include?
Is it possible to css animate a div (background-color) that is outside the ng-view, using a directive on a $state inside the ng-view?
The ng-view has css animations for the routing.
If I do not animate the div then the ng-view anims work fine, but..
If I add animation classes to the div(bgId) then the routing anims do not fire.
Here is a sample of html: (Button added as example - would normally be in the template pages eg. home.html / login.html )
<body ng-app="app" ng-controller="MainCtrl">
<div id="bgId" class="{{colorVal}}">
<ion-nav-view animation="slide-left-right">
</ion-nav-view>
</div>
<button swapcolour="changeColour()" data-nxtpage="1">change colour</button>
</body>
This is controlled by a directive(swapcolour) that gets the nxtpage value from the button attr and updates the colorVal in MainCtrl.
//MainCtrl.js
.controller('MainCtrl', ['$scope', '$state', function($scope, $state) {
$scope.colorVal = 'redBg';
}])
//Directive.js
.directive('swapcolour', function ($rootScope, $state) {
var pageArr = [{home:'redBg'},{login:'blueBg'}];
return function (scope, element, attrs) {
var nextPageNum = attrs.nxtpage;
var obj = pageArr[nextPageNum];
var item = Object.keys(obj);
var objItem = obj[item];
element.bind('click', function () {
$state.transitionTo(item[0]);
$rootScope.$$childHead.colorVal = objItem;
});
}
}])
I do not know why it fails. Any ideas?? I am new to directives. (Trying to setup a plunker, but having issues getting ionic working with it)
I fixed it! - I think.
Basically after totally stripping the application to its bones I managed to build a plunker and got it working.
There was nothing wrong with my code after all.
<body ng-app="app" ng-controller="MainCtrl">
<div id="bgId" class="{{colorVal}}">
<ion-nav-view animation="slide-left-right">
</ion-nav-view>
</div>
</body>
http://plnkr.co/edit/Oug8zD?p=preview
Then I tried this code on my app - and it still did not work! So I tried replacing my ionic.bundle.js and ionic.css files (orig installed using npm) with the files used in the plunker (1.0.0-rc.1) and my app worked :)
Hope this helps others in trouble in the future.
We are working with jquery 1.9.1 and angular 1.2.13. We are using a wysiwyg editor that works great, we save the html into the database and load the html back using jquery append function and works fine. Now we are trying to append the same html into a div tag (the wysiwyg editor also uses a div) and the append function it's not working. We check in the console, and the string we are trying to append is there, also jquery grabs the element (also checked in the console log) but the append function it's not working.
PD: I apologize for my english
The html
<div data-ng-controller="PreviewCtrl">
<div class="container">
<div id="resumenPreview"></div>
</div>
</div>
The controller
angular.module('module').controller('PreviewCtrl', ['$scope', '$routeParams', '$location', '$http', 'selectedElement',
function ($scope, $routeParams, $location, $http, selectedElement) {
$scope.id = $routeParams.id;
$scope.mensaje = $scope.id;
$scope.imagen = null;
$scope.dataImagen = null;
//is not working either
$('#resumenPreview').append("hola");
$scope.pageLoad = function () {
var x = selectedElement.data.Resumen;
//This is properly displayed in the console
console.log(x);
//This too, is displayed in the console log
console.log($('#resumenPreview'));
// Why this isn't working? I'am clueless
$('#resumenPreview').append(x);
};
$scope.pageLoad();
}]);
My guess would be there are multiple divs with id="resumenPreview". But this is clearly the wrong way to handle such things in angular. There shouldn't be dom-manipulation in the controller - directives should take care of dom-related stuff. Put the html-string into the scope and let angular handle the injection into the dom:
instead of $('#resumenPreview').append(x); do $scope.resumenPreview = x;
and in the template do this:
<div class="container">
<div ng-bind-html="resumenPreview"></div>
</div>
Solve it with angularjs for the ng-bind-html to work it's necessary to include
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-sanitize.js"></script>
and to add 'ngSanitize' as a dependency in the app module configuration. And then just do what #Johannes Reuter posted.
Thanks everybody, Greetings.
suppose I have this bit of html and javascript:
$scope.test = "hello<br/>world";
<div>{{ test }}</div>
angular will obviously render it as:
<div>hello<br/>world</div>
and that is exactly how it is supposed to work but, what if I would like it to actually render it as html markup rather than text?
I know this can lead to security problems, but I would just like to know out of curiousity.
Thanks in advance.
You can use the ng-bind-html directive in AngularJS.
<div ng-controller="ngBindHtmlCtrl">
<p ng-bind-html="trustedHtml"></p>
</div>
where
$scope.myHTML = "I am an <code>HTML</code>string with links!"
will be rendered accordingly.
For the security concerns involved in this, before you pass the HTML content to your scope variable myHTML, sanitize it with:
$scope.trustedHtml = $sce.trustAsHtml($scope.html);
and then use $scope.trustedHtml in your ng-bind-html directive as listed above.
You can create a filter as suggested here:
HTML :
<div ng-controller="MyCtrl">
<div ng-bind-html="my_html | to_trusted"></div>
</div>
This is how your javascript would appear:
var myApp = angular.module('myApp',[]);
angular.module('myApp')
.filter('to_trusted', ['$sce', function($sce){
return function(text) {
return $sce.trustAsHtml(text);
};
}]);
function MyCtrl($scope) {
$scope.my_html = '<div>hello<br/>world</div>';
}
I was trying to make a blog in angularJS and on the post message section I want to get the message from json and add it to a content div like this
<div class="content">
{{json.message}}
</div>
Now my div has a paragraph in it, it's practically a html code like this
<p>this is my message</p>
but when i do this, i see on the screen this
<p>this is my message</p>
as text. I understand in previous versions i could use ng-bind-html-unsafe but i am using v1.2 of angularJS. Can anyone please show me code similar to ng-bind-html-unsafe so that I can make this work in v1.2?
Thank you, Daniel!
You can use the Strict Contextual Escaping services ($sce) in 1.2
Controller:
function myCtrl($scope,$sce) {
$scope.myHtml = $sce.trustAsHtml('<span>Hello World!</span>');
}
Template:
<div ng-app ng-controller="myCtrl">
<div ng-bind-html="myHtml"></div>
</div>
Example: http://jsfiddle.net/TheSharpieOne/GKnrE/1/
You'll need to inject and use the $sce service to mark it as trusted HTML, then use the ng-bind-html directive (plunkr):
app.js:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $sce) {
$scope.name = $sce.trustAsHtml('<p>Hello World</p>');
});
index.html:
<body ng-controller="MainCtrl">
<div class="content" ng-bind-html="name"></div>
</body>