Let's say I have the following:
<my-directive value="{{row.id}}" /> <!-- row not defined -->
Then inside of your directive:
<div ng-repeat="row in rows">
<a ng-click="/path/{{value}}">..</a>
</a>
Where value is the same value as passed into the directive. How do I defer the evaluation of the attribute?g
To your question:
A) You could use $timeout in your directive's link function and set a second parameter when the timeout expires.
B) or, you could use $watch if you are waiting for it to be set and then conditionally update that second parameter.
However, I suspect the problem may come from an issue in you link and loop. Perhaps something like what is below would work better. Note the removal of the ng-click.
<div ng-repeat="row in rows">
..
</a>
Related
I have the following ng-repeat that gives an element a className based on whether it is even or odd...
<div ng-click="displayHTML(content)" ng-class-odd="'title'" ng-class-even="'html'" ng-repeat="content in name.name">
{{content}}
</div>
On ng-click I am calling displayHTML() and passing a parameter content so that only that particular div that is clicked calls the function.
However on ng-click I'm attempting to see whether the clicked element is ng-class-odd or ng-class-even and I want the function to only be called if the element is ng-class-odd.
But I do not know an easy way to do this. Is there an easy "angular" way of doing it. If not, what should I put here...
$scope.displayHTML = function(obj){
////
}
ngRepeat exposes several local variables to the scope, specifically $even and $odd. Just use those:
<div ng-click="displayHTML(content, $even)" ng-class-odd="'title'" ng-class-even="'html'" ng-repeat="content in name.name">
{{content}}
</div>
js:
$scope.displayHTML = function(obj, $even) {
if($even) {/* even code*/}
else {/* odd code */}
}
I am trying to bind the expression used in a ng-show attribute to the result of a jQuery selector. The reason for this is that I need to hide/show an element based on the presence of another element (ng-view)
The markup I have currently is
<div ng-view id="partialView"></div>
<div ng-show="$('#partialView').length === 0">
<h1>MAIN CONTENT</h1>
</div>
and when this is rendered I get:
<!-- ngView: -->
<div ng-show="$('#partialView').length === 0" class="ng-hide">...</div>
when the ng-view is not provided, or
<div ng-view id="partialView">...</div>
<div ng-show="$('#partialView').length === 0" class="ng-hide">...</div>
the expression in the ng-show is not being evaluated (or maybe simply not re-evaluated).
My question is
Is this the correct way to bind the ng-show to the presence of another element in the DOM, and if it is the correct way to do it, what is wrong with my syntax that is stopping it from working?
ng-show work with scope that you defined in controller.
you should define scope with jQuery or scope.
like
$scope.partialView=0 //or any thing that you want.
<div ng-show="partialView === 0" class="ng-hide">...</div>
Your view does not know what $() is, in your controller assign the jquery $ to $scope element e.g. $scope['$'] = $
Thanks to the help of #basant-rules and #martin-glennon I moved the logic into the controller, so now my controller has a function defined on it's scope:
var LandingPageController = function ($scope) {
$scope.noPartialView = function () {
return $('#partialView').length ===0;
};
};
and the view looks like:
<div ng-view id="partialView"></div>
<div ng-show="noPartialView()">
<h1>Main Content</h1>
</div>
I am trying to initialize $scope.selectedModel to model1with ng-init. However, the following HTML fails to accomplish this:
<div class="productImage">
<div class="imageGallery" ng-init="selectedModel='model1'">
<div ng-repeat="mod in pTab" ng-if="modelIsActive(mod)">
<div ng-repeat="img in mod.galleryImages">
<img class="overviewProductImage" ng-src="{{img.image}}" ng-if="productImageIsActive(img, $index)"/>
</div>
</div>
</div>
</div>
And here's the modelIsActive method that uses selectedModel:
$scope.modelIsActive = function (tab) {
return tab.model== $scope.selectedModel;
}
Eventually I will want to use ng-init="selectedModel= mod.model" but when that didn't work I substituted the simple string 'model1' and found it still wasn't initializing selectedModelto that string.
How can I use ng-init to set $scope.selectedModel? Or should I be using something else? Do I need to use $watch or something similar?
If you can, it is better to initialize your selectedModel in your controller rather than in the HTML using ng-init: this directive can have exepected behaviors.
If you really need to though, you either need to at least define $scope.selectedModel in your controller and then set a value in the ng-init, or use an object instead of directly a value, such as
<div ng-init="model.selectedModel = 'model11'">
(but you'll still need to initialize $scope.model in your controller)
please put your ng-if into the inner of repeat:
<div ng-repeat="mod in pTab">
<div ng-repeat="img in mod.galleryImages" ng-if="modelIsActive(mod)">
I have the following code:
<div ng-repeat="item in items">
<div ng-include src="itemG.html"></div>
</div>
then in itemG.html I have:
<img src="{{item.image}}">
How can I get my ng-repeat to print out all of the images?
There are 2 potential problems in the code...
src="itemG.html" needs an extra pair of single quotes like this:
<div ng-repeat="item in items">
<div ng-include="'itemG.html'"></div>
</div>
And the img tag is missing a closing ":
<img ng-src="{{item.image}}">
Plunker: http://plnkr.co/edit/7IUs7WPdUYkfVVKtBN1m?p=preview
Basically, what this comes down to is that the browser will interpret what inside the src attribute literally, until angular comes along to replace it. If you have a string constant, you can use single quotes inside the src="'myurl.html'", but if you have a value that needs to be bound by angular, you have to use ng-src and the expression syntax of {{ }}
You also need to bind a model to your template file itself. It's not going to pick up the bindings from your repeater without some help from either the ng-include event directives, or it's own model/controller/directive. There are too many different ways to demonstrate that, and it's also relevant on what markup is in your template file, which I can't say.
However, if the img tag is the only thing in that file, then instead of the file, I'd just do this:
<div ng-repeat="item in items">
<img ng-src="item.image" />
</div>
Since you're inside a repeat, it's already being included, making the ng-include redundant.
In principal code
<div ng-repeat="item in items">
<ng-include src="itemG.html" ng-controller="MyCtrl" ng-init="i=item"><ng-include>
</div>
then in itemG.html I have:
<img src="{{i.image}}">
In my code i like to pass to arguments to the function specified inside the ng-click attribute.
<div class="shout" ng-repeat="user in users">
<p>{{user.name}}</p>
<img src="media/images/delete.png" ng-click="deleteUser({{$index}},{{user._id}})"/>
</div>
and in the controller
function deleteUser(index, userId){...}
the parameter index is to remove the user from $scope.user and user._id to remove it from the mongodb. i am a newbee to angular js.
when i tried like this the deleteUser is not getting called. if i pass single argument it works like charm but when i pass more than its not working
You don't need {{ }} while specifying arguments to an event handlers (ng-click). The correct syntax would be ng-click="deleteUser($index, user._id):
<div class="shout" ng-repeat="user in users">
<p>{{user.name}}</p>
<img src="media/images/delete.png" ng-click="deleteUser($index, user._id)"/>
</div>
Here is a working plunker based on the code you've provided (check the console to see that click handler is working correctly): http://plnkr.co/edit/26A4Rj0FScPXYU7z92E6?p=preview