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>
Related
I made a custom attr directive and i will use it in siblings elements like:
<div>
<div [customAttrDirective]="'value'">1</div>
<div [customAttrDirective]="'value'">2</div>
<div [customAttrDirective]="'value'">3</div>
<div [customAttrDirective]="'value'">4</div>
</div>
I olso made a service that control all of my directives. Inside this it I want to know the count of my directives customAttrDirective.
PS: I can't do it by searching by class name(because i add classes inside the directive) and i can't do it by searching by attribute (directive name) because angular change.
Edit: replaced wrong sintax customAttrDirective="'value'" to [customAttrDirective]="'value'"
Many thanks.
Assuming your custom attribute directive's class name is CustomAttrDirective, in the component that you are using your custom directives, add this:
#ViewChildren(CustomAttrDirective) dirs: QueryList<CustomAttrDirective>
Then in life circle ngAfterViewInit, get the length of variable dirs.
I am using angularJS to filter my data, the filter options are radio buttons fetched from a JSON API, but it does not work though using the usual route. my plunk
HTML
<div class="category">
<div ng-repeat="category in categories">
<input type="radio" name="typefilter" id="{{category.title}}" ng-model="typefilter" value='{{category.title}}'>
<label for="{{category.title}}">{{category.title}}</label>
</div>
</div>
<div class="food" ng-repeat="food in foods | filter:typefilter">
<h4>{{food.name}}</h4>
<p ng-repeat="food in food.type">{{food}}</p>
</div>
Controller
app.factory('Categories', ['$resource',
function ($resource) {
return $resource('https://safe-depths-4702.herokuapp.com/api/categories/:categoryId', {
categoryId: '#_id'
}, {
update: {
method: 'PUT'
}
});
}
]).factory('Foods', ['$resource',
function ($resource) {
return $resource('https://safe-depths-4702.herokuapp.com/api/foods/:foodId', {
foodId: '#_id'
}, {
update: {
method: 'PUT'
}
});
}
]).controller('MainCtrl', function($scope,Categories,Foods) {
$scope.categories = Categories.query();
$scope.foods = Foods.query();
});
my plunk
Whole problem boils down to you are breaking the all important rule of always always always use an object in ng-model
ng-repeat creates a child scope and the typefilter is a primitive only being set in each child scope. The parent scope can't see that primitive
In controller set an object:
$scope.filter={}
In view use filter.typefilter
<div class="category">
<div ng-repeat="category in categories">
<input type="radio" name="typefilter" id="{{category.title}}" ng-model="filter.typefilter" value='{{category.title}}'>
<label for="{{category.title}}">{{category.title}}</label>
</div>
</div>
<div class="food" ng-repeat="food in foods | filter:filter.typefilter">
<h4>{{food.name}}</h4>
<p ng-repeat="food in food.type">{{food}}</p>
</div>
DEMO
When ng-repeat does render a template, it create a child scope which does prototypically inherited from parent case. And Prototypal Inheritance work on reference type of variable's, not on primitive type variable. In your case you are using primitive type variable, so it didn't get followed in your case.
Here in this case typefilter is scope present inside ng-repeat, so then typefilter is available inside the ng-repeat scope only. You can not get its value outside ng-repeat div. So in that case you need to explicitly point out to the parent scope using $parent. before ng-repeat's primitive type variable.
ng-model="$parent.typefilter"
Working Plunkr
But this isn't a good approach to follow, as it gets tightly couple with parent controller scope(Would not work, if you are using Ionic, as it does create child scope on each ion-content)
Rather you should follow, either one of below approach.
Dot rule while defining model(already covered in #charlietfl answer)
controllerAs approach
In this answer, you could find the other way to solve this issue.
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 am including a view using the ngInclude directive. The included view has properties that binds values to $scope.model. This is a problem, since the parent scope is using $scope.model. What i need to do is to "reroute" the included views $scope.model to the parent scope's property $scope.include1.model. How can i do this "scope reroute" the way i want to?
Here is an example showing my problem
<div ng-controller="myCtrl">
<div ng-include="'input.html'"></div>
<div ng-include="'input.html'"></div>
</div>
<script type="text/ng-template" id="input.html">
<div ng-controller="childCtrl">
<input type="text" ng-model="model"/>
</div>
</script>
As you can see i have two includes to the same view, and both input text boxes will be bound to the same value. I want to bind them to different values in myCtrl
I can't make any changes to either my childCtrl or the included view.
You can try this
<div ng-include="'input.html'" ng-init='model=include1.model'></div>
<div ng-include="'input.html'" ng-init='model=include2.model'></div>
I have a main file which includes a file inside a subfolder using ng-include, like this,
<p ng-include=" 'activity/act01/' "></p>
where the ng-include value will change dynamically
then, how can i get current value of ng-include.
ng-include binds to an expression. This is why your example requires single quotes. It wants an expression returning a string. This can be function returning a string, a variable, or a literal string. Because of this, it is easy to bind ng-include to a scope variable.
Here is an example of how to do it:
function TestCtrl($scope) {
$scope.actPage = 'activity/act01/';
$scope.goToActTwo = function(){
$scope.actPage = 'activity/act02';
};
}
And the HTML:
<div ng-app ng-controller="TestCtrl">
<div ng-include="actPage"></div>
<button ng-click="goToActTwo()">Change Act</button>
</div>