I currently have a data feed in my Angular setup which returns certain data as HTML. For example, it returns:
"It’s".
In the template, I can use ng-bind-html so that it displays as "It's", but how do I do this within the controller? I need to do this as I am setting the page title dynamically, but it is displaying the HTML characters above, rather than formatting it correctly.
E.g. using:
$scope.name = data.word (but formats HTML?)
inject $sce and use the following code
$scope.name = $sce.trustAsHtml(data.word;
I solved this. I simply placed the ng-bind-html onto the <title> tag. So:
<title ng-bind-html="seo.pageTitle"></title>
Related
I have an angularjs 1.5.8 application created using Jhipster.
For my website I want to make a HTML and JAVASCRIPT editor. Need to allow user to write HTML Code but JAVASCRIPT also.
Using this library I know I can achieve the follow.
https://github.com/incuna/angular-bind-html-compile
1: Bind HTML Code.
2: Bind Angular code if present in HTML
Eg: <h1>{{$scope.test}}</h1>
Would render correct value in the scope.
But what about something like this in the html
<script>
console.log($scope);
</script>
I get a $scope not defined error, somehow the $scope value is not available in the script tag.
If anyone curious that why I need to do this because we want to provide users of the application to create there own Angularjs Forms.
I solved using ng-include, here is the example source.
I wanted to do two things.
1: Make ng-include work from a scope variable which will contain html and javascript.
2: In the included string if I have a script tag I wanted it to render correct in the ng-include.
To achieve the #1 I did the following.
Used $templateCache service.
Sample code.
$templateCache.put('template-form', vm.html + vm.script);
For point #2
I made sure the script tag is structured in the following way.
<script>
(function() {
'use strict';
angular.module('myApp').controllerProvider.register('AppTemplateController',AppTemplateController);
AppTemplateController.$inject = ['$scope'];
function AppTemplateController($scope){
// WRITE YOUR CODE IN THIS CONTROLLER
// YOU CAN WRITE YOUR VARIABLES/FUNCTIONS HERE.
// MAKE SURE TO CALL THE method "vm.submitForm", to submit your form and pass the form object.
};
})();
</script>
This way you can inject a controller.
My requirement was very very specific to my projecct, I am not sure if others who did not face this issue even would understand what I am talking about. But for those who do face it, I hope you it helpful
I have an AngularJS based web page with a few divs. One of the divs is used to hold different forms depending on user clicks in another div.
The ng-model naming scheme is as follows - ng-model="parameter.parameterName".
Every field name is preceded by "parameter." in its ng-model.
In the form controller, if I use $scope.parameter and assign this to a var, the var remains undefined. However, if I do the same in a form which is directly inside a body, and has its own controller in the same file, $scope.parameter gives me a JSON object containing all values in the form.
Please help understand how to achieve this 2 way binding behavior.
Thanks in advance.
Looks like your controller isn't assigned to the view.
First things first: Check that your script file and angularjs are being included as <script> tags in the html page in the browser.
If it turns out that isn't the problem, you can assign a controller to a view using the ng-controller directive. From the documentation
<ANY
ng-controller="expression">
...
</ANY>
If you're using the $routeProvider to implement routing, you assign the controller in your route's definition, like so:
$routeProvider
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookController'
});
I retrieve the code of an HTML page from a server thanks to a rest service and I want integrate the html code into an empty template
.controller('TestController', ['$scope' ,'$rootScope' , '$sce' , function ($scope ,$rootScope,$sce) {
var restHtml =$rootScope.test; //contains <div>Test</div>
$scope.showHtml= $sce.trustAsHtml(restHtml );
}]);
The template
<div ng-bind-html="showHtml"></div> <!-- didn't work and i want a solution without integrate my html code into a existing div -->
Thank you
Ideally DOM manipulations should not happen in the controller, directives should be used for them.
To answer your question, you could compile the html into your tag. Get the html, find the element you want to insert the html in and use compile to do it. A good example of compile.
Using jQuery, it's easy to replace the innerHtml of a single div, either with content from the elsewhere in the HTML, from a JavaScript var, or from an HTTP call.
How can I do that in AngularJS (without using jQuery)? For example, to keep a page the same, but only replace a side panel?
Try using ng-view / ui-router . More details :
https://docs.angularjs.org/api/ngRoute/directive/ngView
angular-ui/ui-router, how do I inject partial view using $stateProvider?
It seems the answer is: "Think twice if you need to do this." In Angular, the paradigm isn't to modify the HTML, but rather to bind the HTML. So, bind the div's src to a scope or controller var via ngInclude, and just change that var.
I have an HTML page, and inside one of its tags, I have a hard coded text (similar to a json format). I want to get this text and save it in an AngularJS scope variable, that I can parse and use dynamically in an other page.
So I want to know if is it doable with AngularJS? If yes, do you have any indication, which directive I can use?
Thank you.
If you try to get the value of your element. Try this:
In your HTML:
<span id="foo">FOOFOOBAR</span>
In your angular controller :
$scope.foo = angular.element( document.querySelector( '#foo' ) );
or in a classic JS :
var foo = document.getElementById('soap-response').innerText;
If you have id, you can do this
angular.element(document.querySelector('#id')).html() and put it on scope
Get your "hard coded text" with Dom Manipulation in your angular controller.
Then transform it to an object with JSON.parse