How can a child DOM of an angularjs component access the component's variable values?
To illustrate, I am using angular official website first component example. I added a div inside the component.
<span>Name: {{$ctrl.hero.name}}</span>
<!--The following is the child of the component,
which is not showing component's variable as expected -->
<div ng-controller="InnerCtrl">
Inside the component, Name: {{$ctrl.hero.name}}
</div>
Here is the plunker
Related
I am working on an admin panel application which is based on AngularJS 1.5. It is structured as follows:
There is a main component called app, in which I am using all other components.
app.html
<div class="wrapper">
<message-component></message-component>
<header></header>
<leftbar></leftbar>
<body></body>
</div>
In the body component, I am using ui-view to render my component based on the current route.
At one time, three components are usually present : header, leftbar and body. I am using ng-if directive in my leftbar component in which I am calling a function.
leftbar.html
<li ng-if="leftbar.hasPermission('FOO')">
<a ui-sref="foo">
<span>Demo Page</span>
</a>
</li>
leftbar.controller
class LeftbarController {
constructor() {}
hasPermission(name) {
return user[name];
}
}
It basically shows the <li> if the user has a permission named "FOO".
Now, simultaneously my body component is also visible to the user and there is an input field present inside that, so whenever I write something in that field hasPermission method also gets called which is present in a different component.
So what can be the issue here? Why scopes are behaving like this ?
Using UI-router, I have an abstract parent state with 6 child states. The child states are loaded using tabs on the parent state template. Using ng-class, I want the active tab to be highlighted. I can set a $scope.active_tab variable and change it every time the user clicks a new tab, but that won't work if a child state is navigated to directly via url.
You could use ui-sref-active directive, which allows you to add classes to an element when the related ui-sref state is active
<ul>
<li ui-sref-active="active" class="item">
<!-- ... -->
</li>
<!-- ... -->
</ul>
If you have an abstract state that is the parent of other states, then the abstract state and its controller will be loaded first, then the child states will be loaded after the parent state has finished loading.
In the parent controller you can then listen for the $stateChangeSuccess event, and perform your logic there.
$scope.$on('$stateChangeSuccess', function (event) {
// perform your logic here
});
I am trying to use a property off the router to trigger an ngIf but am not sure of the correct syntax in the html. Angular2 RC6
{
path: 'detail/:id',
component: HeroDetailComponent
},
<div *ngIf="router.component = HeroDetailComponent">
some text to be shown if the HeroDetailComponent is loaded
</div>
use === not reflected on angular docs page....
I'm using Angular 1.5 Component router and having trouble getting a scope variable in the parent to be accessible in child components. I've created a plunker here that illustrates the problem. I've created a parent component with this view:
<nav>
<ul class="linkList">
<li><a ng-class="{selected: $ctrl.isSelected('Applications')}" ng-link="['Applications', {search:$ctrl.search}]">Applications</a></li>
<li><a ng-class="{selected: $ctrl.isSelected('Processes')}" ng-link="['Processes']">Processes</a></li>
<li><a ng-class="{selected: $ctrl.isSelected('Tasks')}" ng-link="['Tasks']">Tasks</a></li>
<li><a ng-class="{selected: $ctrl.isSelected('Resources')}" ng-link="['Resources']">Resources</a></li>
</ul>
<div class="filter">
Filter: <input type="search" ng-model="$ctrl.search" />
</div>
<div class="clear"></div>
</nav>
<ng-outlet></ng-outlet>
Notice the "search" variable in the parent component view. I want this to be accessible to child components, but it's not working for me. I've seen examples that show child components being directly referenced in parent components like the following:
<application-grid search="$ctrl.search"></application-grid>
However, doesn't this defeat the purpose of the ng-outlet? I don't think I should have to manually pass parameters to child components like this right? What is the right way to do this?
Just stumbled upon this - hoping you found the solution but if not here it is.
You can get this to work easily using the require property.
Just add this to you child component set up and bingo:
require: {
parent: '^app'
}
Then to access the parent scope object do $ctrl.parent.search.
Note you don't have to call it parent - it can be what ever name you like.
I've forked your plunkr - see it working http://plnkr.co/edit/epPg2xWY6IYJN2Fnvg61
You can access the route parameters through the $routerOnActivate lifecycle hook, which gets called automatically when the route transitions to that component. Here's the example from the Angular docs:
function HeroDetailComponent(heroService) {
var $ctrl = this;
this.$routerOnActivate = function(next, previous) {
// Get the hero identified by the route parameter
var id = next.params.id;
return heroService.getHero(id).then(function(hero) {
$ctrl.hero = hero;
});
};
...
Also, it's worth noting that components created with angular.module().component() always have isolate scopes - i.e., you can't access scope variables from the parent scope in them. They have to be explicitly passed down, either through the router or through the bindings.
For more information, you should take a look at the Component Router section of the Angular developer guide - the documentation for the new router is really sparse, but that guide does a good job of explaining how it all works.
I have step1.html which will be included in a parent.html as follows
<body>
<button ng-click='go(childForm)' value='Click'>
<div ng-include="'step1.html'"></div>
</body>
step1.html ,
<form name='childForm'>
...
</form>
inside go function, I am always getting undefined as the input parameter. I can understand that the parent html is rendered before the step1.html is included, so the value will be undefined. Is there any way to send the child form to the parent scope method?
ng-include creates a child scope so your form name is only being set on that child scope
To fix it, make the form name an object property and define that object in the parent controller
$scope.model={};
<form name='model.childForm'>
Now the model object exists in the ng-include child scope and ng-form will add the new childForm property to it