Develop Reference

Passing scope parameters to a Custom Directive as ng-src is being called repeatedly

My current implementation is shown below which is working but as the getImage method is inside expressions its being called repeatedly when any text change or data is entered on the page
HTML
<div ng-repeat="product in pageData.products">
<div>
<img style="width:60px;" ng-src={{getImage(product)}} />
</div>
</div>
JS:
$scope.getImage = function(product)
{
var image = Utils.getLocalStorageEntityByIdFromList(product.ID,"ProductID", "images");
if(image) return image.Data;
else return "";
};
I am trying put getImage method inside a .directive as most posts are suggesting and pass product as parameter inside the directive.
Post link
How to call a function in "ng-src"
I am new to AngularJS, any help in putting the getImage method in a directive where the product parameter can be passed I will be really thankful.
Something along these lines shown below..
JS:
angular.module('MyApp', [])
.controller('Ctrl2', function($scope) {
})
.directive('mySrc', function() {
return {
restrict: 'A',
link: function ( scope, elem, attrs ) {
var image = Utils.getLocalStorageEntityByIdFromList(product.ID,"ProductID", "images");
elem.attr('src', image.Data);
}
};
});
HTML:
<div ng-app="MyApp">
<div ng-controller="Ctrl2">
<div ng-repeat="product in pageData.products">
<div><img my-src="product" /><div>
</div>
</div>
Many thanks for your time.

To avoid multiple calls to a function in an AngularJS Expression, use one-time binding:
<div ng-repeat="product in pageData.products">
<div>
<!-- REPLACE This
<img style="width:60px;" ng-src={{getImage(product)}} />
-->
<!-- WITH One time binding -->
<img style="width:60px;" ng-src={{::getImage(product)}} />
</div>
</div>
One-time bindings are especially useful in ng-repeat contents because they significantly reduce the number of active watchers.
From the Docs:
One-time binding
An expression that starts with :: is considered a one-time expression. One-time expressions will stop recalculating once they are stable, which happens after the first digest if the expression result is a non-undefined value (see value stabilization algorithm below).
-- AngularJS Developer Guide -- Expressions -- One-time Binding

ng-src actually uses attr.$observe. That may not be necessary in your specific case.
It seems like it would be possible to only pass the product id, since that is all that is used to get the image URL. I might try the following as a starting point for your custom directive.
HTML
<div><img my-src="product.ID" /><div>
JS
//in your new custom directive my-src
scope : {id:'=mySrc'},
link: function ( scope, elem, attrs ) {
var image = Utils.getLocalStorageEntityByIdFromList(scope.id,"ProductID", "images");
attrs.$set('src',image.Data);
}

Use result of jQuery selector in Angular expression

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>

angular expression not working for html

I'm using angular grid -
let's say i have a scope object as follows:
$scope.test = 3
If I want to dynamically set an html id, I would do something like this:
<div id="{{test}}"></div>
Checking the DOM, I see the following:
<div id="3"></div>
For my angular grid, I want to do something like this:
<div ag-grid="{{test}}"></div>
Checking the DOM I literally get:
<div ag-grid="{{test}}"></div>
Is there a way around this?

You can use ngAttr and do this like the following:
ng-attr-ag_grid="{{test}}"
Please check if this helps

Use
<div ag-grid="test"></div>
Check following link and check first example html file forag-grid tag with binding variable
Note: Based on example test should be object not string or other type.

Is {{ }} necessary?
You can try:
ag-grid="test"

Trouble initializing a $scope variable with ng-init in my HTML

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)">

How to create an alias for members of the current scope

I have a piece of html which i use with ng-include. This template is used recursively and expects a scope/controller (sorry, i don't know the correct word in that case) with the name "element":
<div>
<span>{{element.name}}</span>
<div ng-include="mytemplate.html" ng-repeat="element in element.children"></div>
This works fine, but the root element is the member object of a controller with a different name:
<div ng-controller="MyController as control">
<div ng-howto="control.rootelement as element" ng-include="mytemplate.html"></div>
How can i pass my root element into the template?

You can use ng-init to pass data to a recursive template that expects object with a specific name:
<div ng-init="element = control.rootelement" ng-include="mytemplate.html"></div>