In Angularjs template is it possible to use ViewBag.Property in ng-show?
I set some viewbag in my controller/action like this
ViewBag.AllowExport = false;
when i tried following nothing happen
<div ng-show="#ViewBag.AllowExport">
Export
</div>
Above Div is still showing even if AllowExport = false;
Is my syntax is wrong here or we can not use Viewbag in ng-show?
Any advice
Try this:
<div ng-show="'#(ViewBag.AllowExport)'">
Export
</div>
You're mixing fron-tend (Angular/JavaScript) and back-end (Razor) code here. I would strongly advice against that. However if you really want to do that: the result in HTML will be which will just be a string to Angular.
This should work instead since Angular will validate the expression in {{}}:
<div ng-show="{{#ViewBag.AllowExport}}">
Export
</div>
Instead of mixing in Razor syntax in your Angular HTML code I would recommend using a scope variable being set from either some JSON source, or if you really want to mix in MVC data, setting the value in some Javascript configuration:
<script>
window.ClientConfig = {
allowExport: #ViewBag.AllowExport,
};
</script>
Then in your Angular controller simply use $scope.allowExport = window.ClientConfig.allowExport;
And in HTML:
<div ng-show="allowExport">
Export
</div>
Related
While using ngsanitize. It displays only html without css applied.
For example:
The above image should be the output but using ngsanitize ,it displays only the text
What could be added with ngsanitize to display elements with proper css.
<p ng-bind-html ="the text to be displayed(test video)"></p>
if i understood your question correctly, fiddle
you can use $sce.trustAsHtml(), to use inline style directly into the html string, you could do it like this, controller:
$scope.trustAsHtml = function(string) {
return $sce.trustAsHtml(string);
};
And in HTML
<div data-ng-bind-html="trustAsHtml(htmlString)"></div>
Please try with $sce. Before binding it to the scope variable that you use for ng-bind-html. An example below
<p ng-bind-html ="styledHTML"></p>
And in your controller
$scope.styledHTML = $sce.trustAsHtml('<span style="background-color: cyan;">test video</span>');
I've got this template:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" ng-repeat="product in ad.products">
<a href="{{product.link}}">
<h1>{{product.title}}</h1>
<img src="{{product.src}}">
<p>{{product.description}}</p>
<h5>{{product.price}}</h5>
</a>
</div>
</div>
</div>
From my controller I need to evaluate this template so that it checks how many products that have been selected and then it interpolates each product's values into the template. After that is done I also need to remove the ng-repeat so it doesn't fire an error in the external pages that will use this where angular is not present. However I'd figure that I'd just use a regex to look up the ng-repeat and everything in the expression and then remove it.
I've been looking at $interpolate and $compile but I can't figure out how to work with them from my controller so that it does what I want. This is because when I use these on my template and then console log the template value it's a function with a whole lot of nonsense in it.
So doing this:
ad.html = $compile(res.data, $scope);
Generates something like this:
function(b,c,d){rb(b,"scope");e&&e.needsNewScope&&(b=b.$parent.$new());d=d||{};var h=d.parentBoundTranscludeFn,k=d.transcludeControllers;d=d.futureParentElement;h&&h.$$boundTransclude&&(h=h.$$boundTr…
Can someone shed some light on how to achieve what I want?
Your are using $compile function in wrong way, you should call $compile(html) function by passing $scope parameter like below.
var compiledDOM = $compile(res.data)($scope);//then do append this DOM to wherever you want
ad.html = compiledDOM.html(); //but this HTML would not make angular binding working.
I have scope variable.like
$scope.demo='<h1>This is test</h1>';
I can bind html using ng-bind-html like
<p ng-bind-html="demo"></p>
Its working fine but how can bind html inside {{ .. }}
You need to sanitize the html using $sce service, which needs ngSanitize module injected in your app.
Basically you need to allow html as trustAsHtml mehthod of $sce service.
Code
$scope.demo = $sce.trustAsHtml('<h1>This is test</h1>');
Better way
For making it more better you could create an custom filter and reuse that code
app.filter('trsustedhtml', function($sce) {
return $sce.trustAsHtml;
});
Markup
<p ng-bind-html="demo| trsustedhtml"></p>
ng-bind html only take the text, you have to remove the safe control
<p ng-bind-html-unsafe="demo"></p>
In my Angular project, I am using a particular value that in my controller is called something like:
$scope.feature1.items.thisItem
There's a particular <div> in my view that uses thisItem many times and it's quite messy to be referring to it as {{feature1.items.thisItem}} for example:
<div id="{{feature1.items.thisItem}}header>
<h1> You've reached the section about {{feature1.items.thisItem}} </h1>
</div>
Is there any way to rename this variable in the view? I would like to simply call it one. I've tried {{feature1.items.thisItem as one}} but that didn't work. Any other ideas?
Yes! ng-init was designed for this very purpose - aliasing another variable:
<div ng-init="thisItem = feature1.items.thisItem">
<h1> You've reached the section about {{thisItem}} </h1>
</div>
I would advise against using ng-init, it's not designed for this purpose. From Angular's documentation:
The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.
You'll want to create a custom controller for this purpose. Something like the following:
module.controller('RenameController', function($scope) {
$scope.one = null;
$scope.$watch('feature1.items.thisItem', function(value) {
$scope.one = value;
});
});
Yes you can use ng-init on the top of your DOM element
<div ng-app='app'>
<div ng-controller="MyController" ng-init="myVar=feature1.items.thisItem">
{{myVar}}
</div>
</div>
I have some legacy jQuery code. It's a big chunk of code, so I would prefer to port it a little while later. To use it, I call $('#legacyId').legacyFunction().
Here's the deal, though.
I have an ng-if. And within that ng-if, I have the JavaScript where I call my legacy function.
<div ng-if="status=='yes'">
<div id="legacyId">
I am a legacy div!
</div>
<script type="text/javascript">
$('#legacyId').legacyFunction()
</script>
</div>
It looks like this JavaScript is being called when the page loads. Though I load angular after jQuery, it seems that angular removes the section under control of the ng-if, and therefore the jQuery function on #legacyId fails.
Any ideas? Thanks!
Edit-note: I import jQuery and the legacy code that extends jQuery at the top of my HTML document. Angular is loaded at the bottom of the document.
Edit-note 2: I have also tried <div ng-init="$('#legacyId').legacyFunction()"></div>, but I get an error, Error: [$rootScope:inprog] $apply already in progress.
Okay, managed to work this out.
In the HTML:
<div ng-if="status=='yes'">
<div legacy-directive>
I am a legacy div!
</div>
</div>
In my app code:
app.directive('legacyDirective' , function() {
return {
link: function(scope, element, attrs) {
$(element).legacyFunction(scope.$eval(attrs.legacyDirective));
}
}
});
Because of the $(element).legacyFunction(scope.$eval(attrs.legacyDirective));, it looks like I can also pass parameters to the legacyFunction; e.g. <div legacy-directive='{myParameter: true}>
Thank you for all who answered! You set me on the right track.