I know there are other questions about this, but I already tryed and nothing seems to work.
I basically have an angular variable retrieved from an $http.get .
The content is html encoded, like:
Paperwhite – Human Nature
So I have to display it as
<div ng-bind-html="songrel.title.rendered"></div>
To render the html:
Paperwhite – Human Nature
I want to split this value for the - and display only
Human Nature
I tryed something like
<div ng-bind-html="songrel.title.rendered.split('–')[1]"></div>
or
<div ng-bind-html="songrel.title.rendered.split('-')[1]"></div>
Or moving the code in my app.config
$scope.showFirstBr = function(content){
return content.split('–')[1]
};
and then
<div ng-bind-html="showFirstBr(songrel.title.rendered)"></div>
but nothing seems to work. What am I missing?
Try this
var app = angular.module("MyApp", []).controller("MyCtrl", function($scope, $sce) {
var str = 'Paperwhite – Human Nature';
$scope.test = $sce.trustAsHtml(str.split('–')[1]);
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="MyApp" ng-controller="MyCtrl">
<div ng-bind-html="test"></div>
</body>
I've fixed adding this in the controller:
$scope.showFirstBr = function(content){
var c = content.replace('–','-');
return c.split('-')[1]
};
Related
I receive next string (it should be 2 rows):
commentBody:"row 1↵row 2"
I need to render it in two rows.
But unfortunately in my html code it renders in all in one row.
<div ng-if="!comment.openEdit" ng-bind-html="comment.commentBody" class="workItemCommentBody"></div>
Since you didn't provide all the code I am assuming you're using either ngSanitize or $sce.
Read AngularJS Insert HTML into view.
If you want to insert multi line string, first you should replace the line breaks in the string with the <br/>.
Read
Replace line breaks with <br/>
I tweaked the regex to match ↵ character while replacing line breaks.
So below is what it looks
angular
.module('myApp', []);
angular
.module('myApp')
.controller('MyController', MyController);
MyController.$inject = ['$scope', '$sce', '$interpolate'];
function MyController($scope, $sce, $interpolate) {
var commentBody = "row 1↵row 2";
commentBody=commentBody.replace(/(?:\r\n|\r|\n|\↵)/g, '<br />');
$scope.comment = {
openEdit: false,
commentBody: $sce.trustAsHtml(commentBody)
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController as MC">
<div ng-if="!comment.openEdit" ng-bind-html="comment.commentBody" class="workItemCommentBody"></div>
</div>
I am learning Angular using W3Schools.
I just modified an example about "Services"... The following is the code:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p><input type="text" ng-model="num"></p>
<h2>{{num}}</h2>
<h1>{{hex}}</h1>
</div>
<p>A custom service whith a method that converts a given number into a hexadecimal number.</p>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.num = 200;
$scope.hex = hexafy.myFunc($scope.num);
});
</script>
</body>
</html>
When I update the textbox, the "HEX" part is not updating. Why?
Your hexafy.myFunc is called only once when the controller is initialized, hence only the initial value is converted to hex. If you want a function to be called on the value change of a scope variable in runtime, you need filters. AngularJS has a lot of inbuilt filters that are ready to use.
You can also define a custom filter, just like you define services or controllers.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p><input type="text" ng-model="num"></p>
<h2>{{num}}</h2>
<h1>{{num | hexafy}}</h1>
</div>
<p>A custom filter that converts a given number into a hexadecimal number.</p>
<script>
var app = angular.module('myApp', []);
app.filter('hexafy', function() {
return function (x) {
return Number(x).toString(16); // Also convert the string to number before calling toString.
}
});
app.controller('myCtrl', function($scope) {
$scope.num = 200;
//$scope.hex = hexafy.myFunc($scope.num);
});
</script>
</body>
</html>
Further reading: AngularJS Filters
NOTE: A filter is a good idea if you're gonna be using the hexafy functionality at multiple places in/across views. Otherwise, it is just an overkill and the $scope.$watch method will work fine for you, as described in other answers
$scope.hex is not updating because there're no way for it update itself.
The hexafy.myFunc is called only once when the controller is loaded for the first time.
If you want want the $scope.hex property to change with num, you might need a watch on the num property.
$scope.$watch('num', function(newVal, oldVal) {
$scope.hex = hexafy.myFunc($scope.num); /// or newVal
}
The function passed in $scope.$watch will be called everytime the value of $scope.num changes.
for more info see https://docs.angularjs.org/api/ng/type/$rootScope.Scope (the watch section)
Hope it helps.
No need of a service here, you can simple use $watch on the num. See below code snippet, it will update your ui, I have updated your controller code, please check.
app.controller('myCtrl', function($scope, hexafy) {
$scope.num = 200;
$scope.hex = "some default val";
$scope.$watch('num', function(newValue, oldValue) {
$scope.hex = newValue.toString();
});
});
Your Text box is only bind to 'num'. '$scope.hex is not binded to your text box'. So that it is not update when you typing text. You could use '$watch' on 'num'. Read here
app.controller('myCtrl', function($scope, hexafy) {
$scope.num = 200;
$scope.$watch('num', function() {
$scope.hex = hexafy.myFunc(parseInt($scope.num));
});
});
HTML
<html lang="en" ng-app="map" xmlns="http://www.w3.org/1999/xhtml">
<body>
<div ng-controller="topbarController as topbarCtrl">
<div ng-repeat="pages in topbarCtrl.topbar">
{{pages.page}}
</div>
</div>
</body>
</html>
ANGULAR
app.controller('topbarController', ['$http', function($http) {
var topbar = this;
topbar.pages = [];
$http.get('/Hexdra/app/app_data/pages.json').success(function(data){
topbar.pages = data;
});
}]);
JSON
[
{ "page": "about_me"},
{"page": "index"}
]
I am trying to display a list of pages by using ng-repeat and loading the page data from a JSON through an http.get. My problem is that nothing is displayed on the html page when it is loaded.
I checked this but couldn't seem to get that fix to work.
I am also having a hard time keeping track of all the different names.
1.) I know that my controller is called topbarController. In the HTML the controller scope is then renamed to topbarCtrl.
2.) I then have angular index through my pages object and inside its own div it displays every page.
Fixes are appreciated but also further reading to what has gone wrong would also be appreciated.
Thank you!
I had to look over your code a few times, but the issue is in the following line:
<div ng-repeat="pages in topbarCtrl.topbar">
You assigned topbar to this in your controller:
var topbar = this;
topbar.pages = [];
Change your ng-repeat to this, and it will work
<div ng-repeat="pages in topbarCtrl.pages">
try this
app.controller('topbarController', ['$http', function($http) {
$scope.topbar {
topbar.pages : []
};
$http.get('/Hexdra/app/app_data/pages.json').success(function(data){
$scope.topbar.pages.push(data);
});
}]);
and your html must be like this:
<div ng-repeat="page in topbarCtrl.pages">
{{page}}
</div>
Are you sure that the url that you are giving is proper?
for example it should be like http://localhost:80/Hexdra/app/app_data/pages.json
Try using the absolute url and see if it works
I have a template like this.
<body ng-app="demo" ng-controller="demo">
<div ng-include="/main.html">
</div>
</body>
And the main.html is.
<div ng-app="main" ng-controller="main>
""
</div>
here is the js.
JS-1
var myapp = angular.module('demo', []);
myapp.controller('demo', function($scope,$routeParams, $route,$http) {
$scope.variable="444"
})
JS-2
var mainapp = angular.module('mainapp', []);
myapp.controller('main', function($scope,$routeParams, $route,$http) {
})
Is it possible to access the scope of JS-1 inside JS-2?, if yes how, if no is there any solution to this.Thanks.
It depend what you want to do.
If you want read $scope.variable variable from JS-1, you should see it in JS-2 $scope.
If you want modify $scope.variable form JS-1, you should create method in JS-1:
$scope.changes = function(data){
$scope.variable = data;
}
This method also should be available in JS-2 $scope.
This isn't nice solution but should work.
The best solution is to create service which will provide operations on JS-1 fields.
Is it possible to render template with AngularJs not on Page, but probably in memory? I need to prepare html to be send as email.
I guess i could render something in hidden div, then in some way assign it content to variable , but for me it looks ugly :(
You can take a look at $compile function: http://docs.angularjs.org/api/ng.$compile
Example:
function MyCtrl($scope, $compile){
// You would probably fetch this email template by some service
var template = '</div>Hi {{name}}!</div></div>Here\'s your newsletter ...</div>'; // Email template
$scope.name = 'Alber';
// this produces string '</div>Hi Alber!</div></div>Here\'s your newsletter ...</div>'
var compiledTemplate = $compile(template)($scope);
};
Sure, you can use the $compile service to render a template. The rendered template will be a DOM node that isn't attached to the DOM tree. And you don't have to attach it to get its content. You could do something like this:
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', '$compile', function($scope, $compile){
var compiled;
$scope.compileTemplate = function() {
var template = '<ul><li ng-repeat="i in [1, 2, 3]">{{i}}</li></ul>';
var linker = $compile(template);
compiled = linker($scope);
}
$scope.sendEmail = function() {
alert("Send: " + compiled[0].outerHTML);
}
}]);
</script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="compileTemplate()">Compile template</button>
<button ng-click="sendEmail()">Send email</button>
</body>
</html>
The reason that I've divided them into two different functions here is because when you compile and link it to the scope, the template isn't filled with data until after the next digest. That is, if you access compiled[0].outerHTML at the end of the compileTemplate() function, it won't be filled (unless you use a timeout...).