I am using haml templates with angular js. While template rendering i want to create a function call on div using ng-click. It is working fine without parameter but when I am passing a parameter to function it behaving like as below for two cases.
%div.sitesContainer
.wrapper
%div.site{"ng-repeat"=>"site in sites",'ng-click'=>"siteBlockclick({{site.id}})"}
%span
{{site.name}}
Then it is giving me error Syntax Error: Token 'site.id' is unexpected But I inspect div it is showing ng-click="siteBlockclick(BWN)" means value is coming but single quotes are missing.
%div.sitesContainer
.wrapper
%div.site{"ng-repeat"=>"site in sites",'ng-click'=>"siteBlockclick('{{site.id}}')"}
%span
{{site.name}}
If I given single quotes it is printing then it is making call like ng-click="siteBlockclick('{{site.id}}')"
How should I concat it so that It will work for me ?
I want something like ng-click="siteBlockclick('BWN') after inspect
Any help appreciated.
Inside an ng-click, you don't need to interpolate (use {{ }}.
So, this should work for you:
%div.sitesContainer
.wrapper
%div.site{"ng-repeat"=>"site in sites",'ng-click'=>"siteBlockclick(site.id)"}
%span
{{site.name}}
the ng-repeat creates each site in scope and the ng-click accesses that scope directly.
Related
i am using in front side AngularJS and in the back Spring.
when i try to get my first or other page, scopes appear like that {{user.fName+' '+user.lName}} in a few seconds its replace with there values.
I want that scope appear directly with there values
Can you be more specific with what you meant by "my first or other page scopes "
Do you mean that initially you get curly braces with angular code - which after a few seconds changes to the actual angular values? If that is the case you need to use ng-cloak in the containing html element. Please refer to the angular JS documentation.
I use pre tags extensively to debug my code in angular js, like so:
<pre>{{vm.names | json}}</pre>
Two questions:
how does this work under the hood?
is there an equivalent tool
with reactjs that lets you see variables' values in the view, instead
of the more common console.logs/debuggers?
You can add <pre>{JSON.stringify(this.state.data, null, 4)}</pre> to the Component holding state to "visualize" the data in your view.
Your <pre> tags have nothing to do with debugging -- they are just HTML elements.
To break down what's happening in your HTML markup snippet:
` does some HTML formatting.
Double Curly Braces {{}} indicate
data binding. (Two-way, to be honest).
vm.names is an object for that
Controller (Without a fiddle, etc, I can't lay out the rest of the
way it's instantiated)
| json tells angular to filter vm.names
using the json
filter.
It looks as if React uses the DOM and a .render function. Have a look at their Getting Started page.
For how this works under the hood, you may want to read about ng-model and how it works, and also Understanding Angular's $apply() and $digest() to get a handle on angularjs model binding.
I have a ng-repeat which is displaying a list of hotels from a jsonresponse. This works fine, but when i come to place a scope data inside an ng-click it isn't working as expected.
I am using:
ng-click="quick_view('{{hotel.hotel_id}}')"
My function is inside the correct controller as is as follows:
$scope.quick_view = function (hotel_id) {
$scope.hotel = hotel_id;
(Hotel ID is 140) so naturally, i would expect 140 to pass to the function quick_view and display '140' when i call {{hotel}}. Instead, what is being displayed is "{{hotel.hotel_id}}".
Any ideas why this is going wrong?
Many thanks, as usual.
{{}} is an Angular expression where you can show data stored in $scope.
Change ng-click="quick_view('{{hotel.hotel_id}}')" to ng-click="quick_view(hotel.hotel_id)".
I'm trying to write a directive that checks the value of the content inside it to decide if certain classes should be applied to the element, and to format the content (probably by forcing the content into a filter if the directive is applied).
I'd like the syntax to call the directive to be as follows
<div my-directive>{{foo}}</div>
and output something like <div ng-class='a?b:c'>{{foo | myFilter }}</div>
I know it's possible to do this by using <div my-directive='foo'></div> but I want to know if my preferred way is possible for consistency across the application.
When I try to access element.text() inside the post-link function, I just get {{foo}} instead of the rendered value. Is there a way to access the value of the directive node's content after it's been bound to HTML?
If you'd like to get the value that your {{foo}} expression evaluates to inside your directive, you could use a combination of $eval and the $interpolate service, like so:
var fooValue = scope.$eval($interpolate(elem.text()));
Here's a JSFiddle to demonstrate.
I am trying to build a directive that:
wraps arbitrary content
prepends anchor tags to all 'h4' elements found in that content
Here's a plunker of what I have so far.
Seems to work fine if wrapped content is static but:
entire wrapped content is repeated twice
is my invocation of transcludeFn effectively repeating work that ng-trasclude is doing? Do I need to replace ng-transclude with own impl?
'h4' tags generated by nested ng-repeat are not found by the directive
looks like 'clone' passed to cloneLinkFn in transcludeFn is pre-ng-repeat execution. thought that $compile(clone)(scope) would then produce post-ng-repeat version but that did not work either it seems.
I'd really appreciate a tip or explanation of what I am doing wrong.
thank you,
-nikita