I have tried to use a function to load the path to a template into an ng-include directive. I hoped that the argument to my function would render due to its insertion in ng-include. But it doesn't work. Here is what I have so far:
HTML:
<div ng-include="'{{content}}'"></div>
...
<div ng-click="showContent('views/my_content.html')">
Angular:
$scope.showContent = function(attrs){
$scope.content = attrs;
};
When I click on the div that has ng-click I can see that {{content}} has been replaced with the template path, but the template itself is not included (i.e., it is not rendered on the page). Is there a way that I can force the template to render?
Instead of this
<div ng-include="'{{content}}'"></div>
use this
<div ng-include="content"></div>
and the template would get rendered.
ng-include does not work like this.
What you need to do is either write another directive that will fetch and show content for you. You could also use $routeProvider to change the url and have it include a template URL.
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 tried appending my template to html div tag as shown below my app.js:-
myApp.directive("panel",function(){
return{
restrict:"E",
transclude:true,
template:'<div class=panel ng-transclude >hiii i am panel</div>'
}
});
in my html page i tried to append it to the existing html div tag as shown below:-
<panel>
<div class="button">click me </div>
</panel>
but the text in- template:'<div class=panel ng-transclude >hiii i am panel</div>' which is -hiii i am panel is getting hide from this button -<div class="button">click me </div>, iam not able to see the content inside <div class="panel>....</div> of the template.
I believe you misunderstood. Transclude. Transclude means, "replace everything inside the tag that has ng-transclude on it." It is sort of like saying:
var content = $("panel").html();
$([ng-transclude]).html(content);
If you want to have both of them, then you need to include it separately. Try changing your template to:
<div class="panel"><span>hiii i am panel<span><span ng-transclude></span></div>
Which would show you both.
Here is a fiddle that does it http://jsfiddle.net/17nb3kg1/
Probably it's the entire layout wrong but here is my situation, I'm using a Meanjs.org stack with Angular ui-router.
I have a layout like this:
<div data-ng-include="'/modules/core/views/header.client.view.html'"></div>
<div id="page-content" class="clearfix" fit-height>
<div id="wrap" data-ui-view="" class="mainview-animation"></div>
</div>
Now I need to reload the controller inside the header.client.view.html when I change the $state.
For example when I'm in the sign-in page and I login I need to reload the header controller, but having this it's not possible because the ui-router change only the ui-view part with the relative template:
// this change only ui-view, doesn't care about the ng-include before
state('home', {
url: '/',
templateUrl: 'modules/core/views/home.client.view.html',
});
I found the possibility to add more ui-view to the state so I could add a ui-view2 for the header instead using the ng-include but this means having the ui-view2 on each state.
Any suggest?
You might not need to "reload the controller" every time the state changes, instead make your controller react to the state change on the fly and update its properties.
Check out the ui-router $stateChangeSuccess event.
First at all you need to listen #Matti Virkkunen
It's better to listen the state in your header's controller with "$stateChangeSuccess"
So you just have to declare a controller for your header. And inside your header controller add something like this.
$scope.$on('$stateChangeSuccess', function () {
// Do what you want for example check if the current state is home with $state.is('home');
});
Do not forget to declare your controller in your template
<div data-ng-controller="HeaderController" data-ng-include="'/modules/core/views/header.client.view.html'"></div>
<div id="page-content" class="clearfix" fit-height>
<div id="wrap" data-ui-view="" class="mainview-animation"></div>
</div>
Is it wrong to assume that ngInclude can take a raw path? I keep trying to set my ngInclude as follows:
<div ng-include src="views/header.html"></div>
This does not work but if I do something like this it does work.
// HeaderController
app.controller('HeaderCtrl', function($scope){
$scope.templates = {[
template: { url: 'views/header.html' }
]};
$scope.template = $scope.templates[0].template;
});
In my index.html
<div ng-controller="HeaderCtrl">
<div ng-include src="template.url"></div>
</div>
Does ngInclude only except values off of the scope? If so why is it this way and not a straight include of the html partial.
ng-include accepts an expression.
If you want to specify the explicit URL directly in there, you have to give a string.
<div ng-include src="'page.html'"></div>
ng-include, as other directives (ng-class, ng-src ...) evaluates an Angular expression from the scope. Without quotes (''), it will search for a variable of the scope.
Note that you don't have to specify the src attribute.
<div ng-include src="'views/header.html'"></div>
Can be rewritted to: (that is simpler)
<div ng-include="'views/header.html'"></div>
You can also use ng-include as an element:
<ng-include src="'views/header.html'"></ng-include>