I'm trying to pass a variable to angularjs from cmsfn. Did anyone managed to do it already?
<div ng-controller="someController">
[#assign currentNode = cmsfn.asJCRNode(content)]
[#assign rootPageNode = cmsfn.root(currentNode, "mgnl:page")!]
<div style="display: none">{{myVar='${rootPageNode}'}}</div>
</div>
In the above code, when i try to use myVar in angular, its value is empty.
So first, reduce your FM code to single line:
[#assign rootPage = cmsfn.root(content, "mgnl:page")!]
This way, what you get back is still ContentMap and not Node which is easier to manipulate in the template.
Second, get the name of the page (if that is what you want):
${rootPage.#name}
You can find list of other special properties of content map at the bottom of this page
Now, last about the angular part, what you have in your template is just angular expression, "print statement" if you will, which will not assign variable. You need to do the assignment using $scope.myVar=... in the someController controller itself. Which means that the .js file itself needs to be freemarker template.
Related
I appended version number to all of my templates under routeProvider so that it will load the latest templates every time the version number changes. It works just fine until I noticed that there is still one more template that needs to be appended, and that`s the sidebar-menu that was found on ng-include. I appended version number to it using this code
<div ng-include = "'views/sidebar-menu.html?v={{VERSION_NO}}'"></div>
I successfully changed the version number, however, it is still not reflecting my latest changes to the menu template. Any idea why this doesn`t work?
Reason it didn't worked is you put variable name inside single quotes so it will be considered as string .
Try:
<div ng-include = "'views/sidebar-menu.html?v='+VERSION_NO"></div>
This will parse your variable and give you required version.You don't need paranthesis {{ }} as it evaluates expression, hence will evaluate your variable automatically
ng-include takes an expression, so you don't need interpolation syntax {{. Instead, you can set the full string on the scope.
$scope.sidebarTemplate = 'views/sidebar-menu.html?v=' + VERSION_NO;
Now you can do <div ng-include="sidebarTemplate">
I am trying to modify the project ngImgCrop (https://github.com/alexk111/ngImgCrop) for allowing crop multiple images in the same page, but I do not know how many images I would need, this is created dynamically. So, I need to associate to the 'image' field of a dynamic value, and at the same time I put this variable in my scope. The problem is that this label is not evaluating the angular code.
<div class="cropArea" id="{{'person'+person.Id}}">
<img-crop image="{{'person'+person.Id}}" result-image="myCroppedImage"></img-crop>
</div>
Even when they have the same code, when the page is loaded the html code shows:
<div class="cropArea" id="person12345">
<img-crop image="{{'person'+person.Id}}" result-image="myCroppedImage"></img-crop>
</div>
In my scope since the beginning the variable $scope.person12345 is created, but It is impossible to make the binding without this part.
What can I do?
Note:
In my init() function I create all the variables:
angular.forEach(persons, function (person, index) {
$scope['person'+person.Id]='';
});
I actually can see the variable $scope.person12345 when the page is loaded. In any case why does the expression worked for the div and not for the img-crop?
Please put your expression as a function which will execute in the Controller. string(appending string) will return by a function like below.
<div class="cropArea" id="{{'person'+person.Id}}">
<img-crop image="getImagePath(person.Id)" result-image="myCroppedImage"></img-crop>
</div>
Controller like below:
$scope.getImagePath = function(id){return 'person'+id+'.png';};
Some how there is no parser available in the directive of image, that's why you need to give parsed expression via a controller.
I have a HTML-Document containing moustache expressions that angular-dart evaluates very well:
</head>
<body ng-cloak>
<ctrlTextElements>
<div id="stage">outside: {{ctrlTextElements.test1('three')}}</div>
</ctrlTextElements>
I want to dynamicaly add some HTML with moustache expression like so:
CtrlTextElements.addTextElement(mousePos.x, mousePos.y);
var div = dom.querySelector('#stage');
HttpRequest.getString("../path/text.html").then((r) {
div.children.add(new Element.html(r, validator: new AllowAllValidator()));
});
The content of the added text.html looks like this:
<div>inside: (not evaluated): {{ctrlTextElements.test1('three')}}</div>
That's the result in the browser:
outside: three
inside: (not evaluated):{{ctrlTextElements.test1('three')}}
How can I reevaluate the moustache expressions inside content that has been applied after the page was loaded?
The problem is that you are mixing jQuery like logic with angular logic here : manipulating the dom 'by hand' is rarely a good solution.
The problem here is that your newly added binding has not been compiled by angularjs = it has not been indexed as a directive that should be watched for and updated when scope changes.
Either you try a more angular way, for example using ng-hide or ng-repeat directive to display your content according to the controllers $scope (or another custom directive), or you try to $compile your newly added directive ( but this is bad ) : https://docs.angularjs.org/api/ng/service/$compile .
Maybe try in your controller :
$scope.$compile( div );
Not sure of the syntax though. Maybe you would need to write
<span ng-bind="..."></span>
instead of
{{ ... }}
to make it work.
#Alexhv is right. Sorry for my previous answer. I assumed it is about Polymer. Was already time for bed.
You can find a code example in my answer to this question: setInnerHtml doesn't evaluate Mustache
The pub package bwu_angular (http://pub.dartlang.org/packages/bwu_angular) contains this code as a Decorator (Directive) named bwu-safe-html
I have an app that requires HTML to be pieced together from different APIs. Rather than getting into specifics there, let me just say that we have tried getting away from that many times but in the end the best answer always end up being what we currently have. Hopefully that changes someday but for now it's working great.
Currently, the HTML is parsed together as a string server-side using NodeJS and sent across the wire as complete HTML to be rendered. I'm in the process of adopting AngularJS, and while I'm loving it I am stuck on this issue-- how can I use Angular templating to insert invalid HTML at times?
The server will return three JSON fields: leadingHTML, trailingHTML, and copy. The copy field is always valid HTML, but leadingHTML and trailingHTML can sometimes return invalid HTML. When all three are added together, valid HTML results.
Let me illustrate:
leadingHTML='<figure>';
copy = '<img src="img1.jpg"/><img src="im2.jpg"/><figcaption>I love AngularJS</figcaption>';
trailingHTML='</figure>';
As you can see, if you add those together you will get the valid HTML that is required to be displayed. It's pretty easy to make the fields trustworthy HTML in Angular:
for (i in data.results){
data.results[i].copy=$sce.trustAsHtml(data.results[i].copy);
data.results[i].leadingHTML =$sce.trustAsHtml(data.results[i].leadingHTML );
data.results[i].trailingHTML =$sce.trustAsHtml(data.results[i].trailingHTML );
}
And then render the copy in my view:
<div ng-repeat='i in data.result'>
<p ng-bind-html='i.copy'></p>
</div>
But I need a way that does what this looks like it would do, but the leadingHTML and trailingHTML scope variables get render as strings:
<div ng-repeat='i in data.result'>
{{ i.leadingHTML }}
<p ng-bind-html='i.copy'></p>
{{ i.trailingHTML }}
</div>
Is the best answer here to build the template via javascript? Would that even work?
Are you able to pre-process your data so that you do have valid HTML?
var item;
for (i in data.results){
item = data.results[i];
item.content = $sce.trustAsHtml(item.leadingHTML + item.copy + item.trailingHTML);
}
Then you can just bind to the combined content in the view:
<div ng-repeat='i in data.results'>
<div ng-bind-html='i.content'></div>
</div>
Edit:
Yes, this will allow you to embed expressions in your HTML content.
In fact, you will need to be careful that you aren't opening yourself up to security exploits in the trusted HTML content (see the example at the bottom of the page for the $sce service).
Using $sce.trustAsHtml in this way is roughly equivalent to loading a directive's templateUrl from your site, so the security considerations around that are probably the same. See the "How does it work?" and
"Impact on loading templates".
I'm using the Foundation layout framework, which automatically floats the last sibling of .column to the right and I really appreciate this is a behaviour. However, AngularJS takes it upon itself to insert span.ng-scope after every div.column, which somehow causes browsers to consider the last span the last sibling of .column (even though it is not).
Specifically the css in Foundation responsible for this is:
[class*="column"] + [class*="column"]:last-child { float: right; }
As I understand it, [attribute*="substring"] should select only siblings that match, so, for the above, only elements whose class attribute contains column (including columns). I would think a span tag whose class attribute that does not contain column should not match (and thus be ignored by :last-child). However, this does not seem to be the case.
Regardless, the span is causing the problem:
Angular buggering it up (jsfiddle)
Works fine without Angular (same jsfiddle, no ng-include)
Is there a way to configure angular to stop inserting those span tags? I would, begrudgingly, modify the css selector to somehow ignore all span tags; however I might eventually need/want to use a span tag.
Since you indicated the div can be moved inside, this works:
<ng-include src="'main.tmpl'"></ng-include>
Then in your template:
<div class="row">
<article id="sidepanels" class="four columns">
...
</div>
I'm not aware of any way to prevent angular from inserting the span tags (I think it keeps track of scopes that way -- for garbage collection).
Also you can try my version of include directive that does not creates a scope: Gist source.
As no scopes are created, AngularJS should not create additional element to mainain scope (it actually use data attributes to store link to scope).