var app = angular.module("myDiscuss", []);
app.controller("TabController", function() {
this.tab = 0;
this.subTab = 0;
this.like = 0;
this.selectLike = function(setTab) {
this.like= setTab;
};
this.selectTab = function(setTab) {
this.tab= setTab;
};
this.selectSubTab = function(setTab){
this.subTab = setTab;
};
this.isSelected = (function(checkTab){
return this.tab === checkTab;
});
this.isSelectedSub = (function(checkTab){
return this.subTab === checkTab;
});
this.isSelectedLike = (function(checkTab) {
return this.like === checkTab;
});
});
app.controller('FormController', function($scope) {
$scope.person = {
name: null
};
$scope.people = [];
$scope.submit = function() {
if ($scope.person.name) {
$scope.people.push({name: $scope.person.name});
$scope.person.name = '';
}
};
});
app.directive('replyBox', function(){
return {
restrict:'A',
templateUrl:'../templates/reply-box.html'
};
});
app.directive ('commentSection', function(){
return {
restrict:'A',
scope :{},
templateUrl:'../templates/comment-section.html'
};
});
<body ng-app="myDiscuss">
<div class="container">
<div class="row">
<div>
<div class="thumbnail" ng-controller="TabController as tabs">
<div ng-show="tabs.isSelectedLike(1)">
</div>
<section class="caption">
<ul class="nav nav-pills">
<li ng-class="{ active:like === 1 }" >
<a href ng-click="tabs.selectLike(1)">Helpful</a>
</li>
<li ng-class= "{ active:tab === 2 }">
<a href ng-click="tabs.selectTab(2)">Comment</a>
</li>
</ul>
<div comment-section ng-show="tabs.isSelected(2)"></div>
</section>
</div>
</div>
</div>
</div>
</body>
<!--comment-section.html-->
<div class="panel" >
<form ng-submit="submit()" ng-controller="FormController">
<blockquote ng-repeat="(index,object) in people" >
<ul class="nav nav-pills">
<li ng-class="{ active:subTab === 3 }" >
<a href ng-click="tabs.selectSubTab(3)">Helpful</a>
</li>
<li ng-class= "{ active:subTab === 4}">
<a href ng-click="tabs.selectSubTab(4)">Reply</a>
</li>
</ul>
<div reply-box ng-show="tabs.isSelectedSub(4)"></div>
</blockquote>
<input type="text" ng-model="person.name" name="person.name" />
</form>
</div>
<!-- reply-box.html -->
<div>
<input type="text">
</div>
When I add the reply-box directive to the comment-section directive it does not perform the 'submit' action. When the "reply" link in the commentSection directive is clicked, the ng-show directive does not working for the reply-box directive.
Well I don't see any input type='submit' in your code, maybe thats why ng-submit is not working,
Moreover i think your ng-show directive isn't working because the ng-controller="TabController as tabs" ends here
<div class="thumbnail" ng-controller="TabController as tabs">
<div ng-show="tabs.isSelectedLike(1)">
</div>
<section class="caption" >
<ul class="nav nav-pills">
<li ng-class="{ active:like === 1 }" >
<a href ng-click="tabs.selectLike(1)">Helpful</a>
</li>
<li ng-class= "{ active:tab === 2 }">
<a href ng-click="tabs.selectTab(2)">Comment</a>
</li>
</ul>
<div comment-section ng-show="tabs.isSelected(2)"></div>
</section>
</div>
Thus you are calling your ng-show="tabs.isSelectedSub(4)" wont return any thing because this method is not defined in your FormController.
Hope it helps.
The errors occur because the scope for the comment section directive does not inherit from the parent scope.
Define a scope that inherits from the parent scope
To inherit from the parent scope, you'll need to set the scope property of the comment-section directive to true.
From the AngularJS documentation:
scope: true - the directive creates a new child scope that prototypically inherits from the parent scope. If more than one directive (on the same DOM element) requests a new scope, only one new child scope is created. Since we have "normal" prototypal inheritance, this is like ng-include and ng-switch, so be wary of 2-way data binding to parent scope primitives, and child scope hiding/shadowing of parent scope properties.
The comment-section directive can be rewritten thus:
app.directive ('commentSection', function(){
return {
restrict:'A',
scope :true,
templateUrl:'../templates/comment-section.html'
};
});
Related
I am trying to make a simple app with angular and I can't seem to figure how to hide content when I click links in navigation bar
<body ng-controller="MainCtrl">
<div class="navbar-fixed ">
<nav>
<div class="nav-wrapper teal lighten-1">
<i class="material-icons">dashboard</i>
<ul class="left">
<li class="waves-effect waves-light"><i class="material-icons">search</i>
</ul>
<ul class="right">
<li class="waves-effect waves-light"><i class="material-icons">perm_identity</i>
</ul>
</div>
</nav>
</div>
<div ng-hide>
<H1> must not show</H1>
</div>
<div ng-include="template">
</div>
</body>
Main controller:
var app = angular.module('Testing', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
var classApp = angular.module('classApp', []);
classApp.controller('classCtrl', function ($scope) {
$scope.isActive = false;
$scope.activeButton = function() {
$scope.isActive = !$scope.isActive;
}
});
When I click middle logo I want the content of body in this case "Must not show" should be hidden and display the template I'm using on body. Thanks
You need to bind the visibility to some scope variable; to show you can use:
<i class="material-icons">dashboard</i>
to hide you can use:
<li class="waves-effect waves-light"><i class="material-icons">search</i>
In your controller you define the function showTemplate like:
$scope.showTemplate = function(templateName, hideContent) {
$scope.template = templateName; //template to show
$scope.hideSection = hideContent; //true or false to hide/show the content
}
In this function you set the visible template and you hide or how some other section.
Then you need to bind the section you want to hide to hideSection variable:
<div ng-hide="hideSection">
<H1> must not show</H1>
</div>
ng-hide alone without any variable bound will not work
I'm using the following code to try ng-repeat in angular. I need to show the list which I click. But when I click on the symbol ~, it is showing all the lists.
How can I specify such conditions when using ng-repeat?
HTML
<div ng-app='myapp' ng-controller='cntrl'>
<input ng-model="addy" />
<button ng-click="add()" class="w3-btn w3-padding w3-blue">Add</button>
<span ng-show='span' style='color:red'>The TeXt Is AlReAdY In ThE LiSt</span>
<ul class="w3-ul">
<li ng-repeat="x in names" class="w3-padding-hor-16">
<span ng-click="expand()">~{{x}}
<ul ng-show='show'>
<li ng-repeat="Y in features[$index]">{{Y}}</li>
</ul>
</span>
</li>
</ul>
</div>
Angular JS
<script>
var app = angular.module('myapp',[]);
app.controller('cntrl', function($scope){
$scope.names = ['Fruits', 'Veggies', 'Cars'];
$scope.show= false ;
$scope.features=[['Apple','Mango','Lemon','Grapes'], ['Tomato', 'Carrot', 'Cucumber'], ['Porsche', 'Aston', 'Dodge']];
$scope.expand=function(){
$scope.show = !$scope.show;
}
$scope.add = function(){
$scope.span = false
if($scope.names.indexOf($scope.addy) === -1)
$scope.names.push($scope.addy);
else
$scope.span = true;
}
});
</script>
Pls check it out
var app = angular.module('myapp',[]);
app.controller('cntrl', function($scope){
$scope.names = ['Fruits', 'Veggies', 'Cars'];
$scope.show= false ;
$scope.features=[['Apple','Mango','Lemon','Grapes'], ['Tomato', 'Carrot', 'Cucumber'], ['Porsche', 'Aston', 'Dodge']];
$scope.expand=function(index){
$scope.expanded = ($scope.expanded != index)?index:-1;
}
$scope.add = function(){
$scope.span = false
if($scope.names.indexOf($scope.addy) === -1)
$scope.names.push($scope.addy);
else
$scope.span = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myapp' ng-controller='cntrl'>
<input ng-model="addy" />
<button ng-click="add()" class="w3-btn w3-padding w3-blue">Add</button>
<span ng-show='span' style='color:red'>The TeXt Is AlReAdY In ThE LiSt</span>
<ul class="w3-ul">
<li ng-repeat="x in names" class="w3-padding-hor-16">
<span ng-click="expand($index)">~{{x}}
<ul ng-show='expanded == $index'>
<li ng-repeat="Y in features[$index]">{{Y}}</li>
</ul>
</span>
</li>
</ul>
</div>
I had strucked in passing value from controller to directive
I have two arrays in my controller
$scope.displayPeople.push(data.userName);
$scope.displayOrg.push(data.orgname);
i need to pass these data from controller to directive
my directive
<div>
<div class="multitext-wrap blue-border">
<ul inputfocus>
<!--<li class="tag" ng-repeat="list in selecteditemsdisplay track by $index" ng-class="{selected: $index==selectedIndex}" >-->
<!--<span class="tag-label">{{list}}</span><span class="tag-cross pointer" ng-click="Delete($index,selecteditemslist[$index],list,searchid)">x</span>-->
<!--</li>-->
<li class="tag" ng-repeat="list in displayItems track by $index" ng-class="{selected: $index==selectedIndex}" >
<span class="tag-label">{{list}}</span><span class="tag-cross pointer" ng-click="Delete($index,selecteditemslist[$index],list,searchid)">x</span>
</li>
<li class="">
<input type="text" ng-model="searchModel" ng-keydown="selected=false" ng-keyup="searchItem(searchModel,searchobj)"/>
</li>
</ul>
</div>
<div class="typeahead" ng-hide="!searchModel.length || selected">
<div class="typeahead" ng-repeat="item in searchData | filter:searchModel | limitTo:8" ng-click="handleSelection(item,searchobj,$index,searchid)" style="cursor:pointer" ng-class="{active:isCurrent($index)}" ng-mouseenter="setCurrent($index)">
<div class="bs-example">
<div class="list-group list-group-item active">
{{item.displayConfig[0].propertyValue}} {{item.displayConfig[1].propertyValue}}
</div>
</div>
</div>
</div>
</div>
I was using $emit to send
in controller
$rootScope.$emit("displayEvent", {displayItems: $scope.displayPeople});
$rootScope.$emit("displayEvent", {displayItems: $scope.displayOrg});
in directive
$rootScope.$on('displayEvent', function (event, args) {
$scope.displayOrgs = args.displayItems;
console.clear();
console.info($scope.displayOrgs);
});
by doing this i getting duplicates in place of org (both people and org wher coming )
how can i solve this problem please hepl me thanks in advance
By declaring 'scope: false' you´re able to access the controller´s scope in your directive. 'false' means 'do not create an isolated scope, inherit the controllers'.
.directive('myDirective', function() {
return {
scope: false,
link: function($scope){
//Do stuff with $scope.displayOrgs
//Do stuff with $scope.displayPeople
}
};
});
This option will create an isolated scope and inherits the selected variables. This is a cleaner way of doing it.
.directive('myDirective', function() {
return {
scope:{
displayPeople:'=',
displayOrg :'=',
},
link: function($scope){
//Do stuff with $scope.displayOrgs
//Do stuff with $scope.displayPeople
}
};
});
using $emit for communication between controller and directive is not a preferable.
you need to use "=" scope of directive to allow two-way communication between controller and directive like:
directive
angular.module('YourModuleName').directive('yourDirectiveName',function () {
return{
restrict:'E',
scope:{
displayPeople:'=',
displayOrg :'=',
},
link: function postLink(scope, element, attrs) {
}
}
});
template respective to controller
<yourDirectiveName displayPeople="displayPeople" displayOrg ="displayOrg "></yourDirectiveName >
I have a problem. I need to know how to get grandparent's ID in AngularJS.
I need "{{parent}}" to become "grand-parent".
(it should be <div id="me-and-my-grand-parent">)
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var pid = document.getElementsByClassName("i-am-a-child");
var pid = this.parentNode.id;
if (this.parentNode&&this.parentNode.id)
var pid=this.parentNode.id;
$scope.parent = var pid;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div id="grand-parent{{$index}}" ng-repeat="item in items">
<div>
<div>
<div id="me-and-my-{{parent}}" class="i-am-a-child">
</div>
</div>
</div>
</div>
</div>
My actual code
<li ng-repeat="project in projects" ng-class="{active: project.childToggle, '': !project.childToggle,hasChild: project.children.length > 0 }" ng-dblclick="childToggleCt(project)" id="project-{{$index}}">
<div class="project-overview">
<header class="clearfix flip-area">
<span ng-if="!project.inCart" class="status dropdown-button warning pull-left" id="id-{{ParentIdShow}}" data-intro="Status bar" data-position="right">Pending</span>
And for now JS was like tis :
$scope.ParentIdShow = function(obj)
{
alert(obj.target.parentNode.parentNode.parentNode.id);
}
The answer to these types of "parent of my parent of my parent of my..." is to use the controller as syntax. Read more about it here. In short, it lets you do stuff like
<div ng-controller="ctrl1 as first">
<div ng-controller="ctrl2 as second">
...
<div ng-controller="ctrlN as Nth">
<div ng-repeat="i in arr">
{{first.property}}
{{second.otherProperty}}
{{Nth.nProperty}}
Note how you dont need any parent calls.
I'm trying to keep track of the selected tab in the view model but I can't seem to make it work.
In the following code when you click a tab the header will update correctly but the content of the tab is not displayed. If you remove , click: $parent.selectSection then the contents are shown but the header does not update.
Now if you remove the data-bind="css: { active: selected }" from the li then it seems to work when you click the tabs but the button to select the second tab doesn't.
How can I make this work?
See: http://jsfiddle.net/5PgE2/3/
HTML:
<h3>
<span>Selected: </span>
<span data-bind="text: selectedSection().name" />
</h3>
<div class="tabbable">
<ul class="nav nav-tabs" data-bind="foreach: sections">
<li data-bind="css: { active: selected }">
<a data-bind="attr: { href: '#tab' + name }
, click: $parent.selectSection" data-toggle="tab">
<span data-bind="text: name" />
</a>
</li>
</ul>
<div class="tab-content" data-bind="foreach: sections">
<div class="tab-pane" data-bind="attr: { id: 'tab' + name }">
<span data-bind="text: 'In section: ' + name" />
</div>
</div>
</div>
<button data-bind="click: selectTwo">Select tab Two</button>
JS:
var Section = function (name) {
this.name = name;
this.selected = ko.observable(false);
}
var ViewModel = function () {
var self = this;
self.sections = ko.observableArray([new Section('One'),
new Section('Two'),
new Section('Three')]);
self.selectedSection = ko.observable(new Section(''));
self.selectSection = function (s) {
self.selectedSection().selected(false);
self.selectedSection(s);
self.selectedSection().selected(true);
}
self.selectTwo = function() { self.selectSection(self.sections()[1]); }
}
ko.applyBindings(new ViewModel());
There are several ways that you can handle this either using bootstrap's JS or by just having Knockout add/remove the active class.
To do this just with Knockout, here is one solution where the Section itself has a computed to determine if it is currently selected.
var Section = function (name, selected) {
this.name = name;
this.isSelected = ko.computed(function() {
return this === selected();
}, this);
}
var ViewModel = function () {
var self = this;
self.selectedSection = ko.observable();
self.sections = ko.observableArray([
new Section('One', self.selectedSection),
new Section('Two', self.selectedSection),
new Section('Three', self.selectedSection)
]);
//inialize to the first section
self.selectedSection(self.sections()[0]);
}
ko.applyBindings(new ViewModel());
Markup would look like:
<div class="tabbable">
<ul class="nav nav-tabs" data-bind="foreach: sections">
<li data-bind="css: { active: isSelected }">
<a href="#" data-bind="click: $parent.selectedSection">
<span data-bind="text: name" />
</a>
</li>
</ul>
<div class="tab-content" data-bind="foreach: sections">
<div class="tab-pane" data-bind="css: { active: isSelected }">
<span data-bind="text: 'In section: ' + name" />
</div>
</div>
</div>
Sample here: http://jsfiddle.net/rniemeyer/cGMTV/
There are a number of variations that you could use, but I think that this is a simple approach.
Here is a tweak where the active tab used the section name as a template: http://jsfiddle.net/rniemeyer/wbtvM/