I am new to Angular and want to set the value of scope variable from directive and access it from the template file, but it's not working.
I am using Ratchet Toggle, and want to get all toggles that the user has turned off. I was able to write to the console but was not able to read from the template file.
Here's my directive:
mobileApp.directive('whenToggled', [function() {
function linkFunction(scope, element, attr) {
scope.$watch(function() {
setTimeout(function(){
var has_class = element.hasClass('active');
var id = element.attr('id');
if(has_class==false){
scope.unwanted_ingredients += id;
}
else
scope.unwanted_ingredients = "none";
},0)
}, function(value) {
//
});
}
return {
restrict: 'A',
scope: true,
link: linkFunction,
};
}]);
and here's my template code:
Ingredients: {{unwanted_ingredients}}
<ul class="table-view">
<li class="table-view-cell">
Item 1
<div id="item1" class="toggle" when-toggled ng-click="">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Item 2
<div id="item2" class="toggle active" when-toggled ng-click="">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Item 3
<div id="item3" class="toggle" when-toggled ng-click="">
<div class="toggle-handle active"></div>
</div>
</li>
<li class="table-view-cell">
Item 4
<div id="item4" class="toggle" when-toggled ng-click="">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
unwanted_ingredients is being populated on initial load as I set it on the controller as:
$scope.unwanted_ingredients = "abc";
but the value is not being changed through the directive link. I appreciate your input on this as I don't understand well how scopes works with Angular.
Related
Im looking for some solution to get tab label text on li ng-click. i'm using radio button for multiple options. suppose i click on local tab button and then selected poin to point radio button. im getting radio button value but i need category name also (local & outstation).
<ul class="tabs">
<li class="tab-link current" data-tab="tabs-1">LOCAL</li>
<li class="tab-link" data-tab="tabs-2">OUTSTATION</li>
</ul>
<div id="tabs-1" class="tab-content current">
<div class="tab-elements">
<div class="checkboxes-demo">
<div class="fac fac-radio fac-default"><span></span>
<input id="box1-fac-radio" type="radio" name="radioPlatFormName" ng-change="radioPlatForm('Point to Point')" value="Point to Point" ng-model="selectCar.platform">
<label for="box1-fac-radio">Point to Point</label>
</div>
<div class="fac fac-radio fac-default"><span></span>
<input id="box2-fac-radio" type="radio" name="radioPlatFormName" ng-change="radioPlatForm('Hourly')" value="Hourly" ng-model="selectCar.platform">
<label for="box2-fac-radio">Hourly</label>
</div>
</div>
</div>
</div>
<div id="tabs-2" class="tab-content">
<div class="tab-elements">
<div class="checkboxes-demo">
<div class="fac fac-radio fac-default"><span></span>
<input id="box3-fac-radio" type="radio" name="radioPlatFormName" ng-change="radioPlatForm('One Way')" value="One Way" ng-model="selectCar.platform">
<label for="box3-fac-radio">One Way</label>
</div>
<div class="fac fac-radio fac-default"><span></span>
<input id="box4-fac-radio" type="radio" name="radioPlatFormName" ng-change="radioPlatForm('Round Trip')" value="Round Trip" ng-model="selectCar.platform">
<label for="box4-fac-radio">Round Trip</label>
</div>
</div>
</div>
</div>
Here is my app code for getting radio button value
var appModule = angular.module('cormobApp', []);
appModule.controller('selectCarCtrl', function($scope) {
$scope.radioPlatForm = function(platformChange) {
$scope.platformSelected = platformChange;
}
You can do this way.
Inside your HTML
<li class="tab-link current" data-tab="tabs-1" ng-click="TabName('Local')">LOCAL</li>
<li class="tab-link" data-tab="tabs-2" ng-click="TabName('Outstation')">OUTSTATION</li>
Inside your Controller
$scope.TabName= function(name) {
alert(name);// You can get selected tab name here
}
try to do it this way
on js
$scope.local = "LOCAL"
$scope.outstation = "OUTSTATION"
$scope.localfunction = function (local) {
$scope.platformSelected = local;
}
$scope.outstationfunction = function (outstation) {
$scope.platformSelected = outstation;
}
on html
<li class="tab-link current" data-tab="tabs-1" ng-click="localfunction('local')">{{ local }}</li>
<li class="tab-link" data-tab="tabs-2" ng-click="outstationfunction('outstation')>{{ outstation }}</li>
<span class="third-text-right" ng-if="selectCar.platform == 'Hourly' || selectCar.platform == 'Point to Point'">Local</span>
<span class="third-text-right" ng-if="selectCar.platform == 'One Way' || selectCar.platform == 'Round Trip'">Outstation</span>
I used two spans to show which tab is selected when clicking any sub option it will compare which radio button value match with condition it will show that span.
Thanks for prompt response guys. Thanks a lot
I'm working on AngularJS with ng-route, have a navigation Matches, Standings and when I click on Matches I want to open a sub navigation All, 1st Round, Semi Finals ... and I want by default the allmatches.html view to be displayed below.
I wrote something like this:
$routeProvider
.when('/matches', {
templateUrl: 'views/matchesmenu.html',
controller: 'matchesmenuCtrl',
})
to display the matches sub navigation once I click on Matches and it works fine. What can I do now to display the allmatches.html just below it (I mean by that route to matches/all
I tried to add
redirectTo : '/matches/all'
in
.when('/matches', {
templateUrl: 'views/matchesmenu.html',
controller: 'matchesmenuCtrl',
})
but it redirects without displaying the sub navigation.
Example on plnkr: https://plnkr.co/edit/UoTcOlcDQSwveCTbmxyY?p=preview
Allright, here your are - runnable plnkr. This provides a simple tab handling logic for you.
TabView
<div ng-controller="TabCtrl">
<ul class="nav nav-tabs">
<li role="presentation" ng-class="{'active' : activeTab === 'all'}">
<a ng-click="activeTab = 'all'">All</a>
</li>
<li role="presentation" ng-class="{'active' : activeTab === 'first-round'}">
<a ng-click="activeTab = 'first-round'">1st Round</a>
</li>
<li role="presentation" ng-class="{'active' : activeTab === 'semi-finals'}">
<a ng-click="activeTab = 'semi-finals'">Semi Finals</a>
</li>
<li role="presentation" ng-class="{'active' : activeTab === 'finals'}">
<a ng-click="activeTab = 'finals'">Final</a>
</li>
</ul>
<div>
<div class="" ng-switch="activeTab">
<div ng-switch-when="all">
<div data-ng-include="'first-round.html'"></div>
<div data-ng-include="'semifinals.html'"></div>
<div data-ng-include="'finals.html'"></div>
</div>
<div ng-switch-when="first-round">
<div data-ng-include="'first-round.html'"></div>
</div>
<div ng-switch-when="semi-finals">
<div data-ng-include="'semifinals.html'"></div>
</div>
<div ng-switch-when="finals">
<div data-ng-include="'finals.html'"></div>
</div>
</div>
</div>
</div>
AngularJS application
var app = angular.module('myApp',['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/matches', {
templateUrl: 'matchesmenu.html'
})
.when('/matches/all', {
templateUrl: 'allmatches.html'
})
}).controller('TabCtrl', function ($scope) {
$scope.activeTab = 'all';
});
Try this
Define your sub menu in controller level
$scope.tabs = [
{title: 'All', url: 'allmatches.html', active: true, type: 'all'},
{title: '1st Round', url: 'semiFinals.html', active: false, type: 'semi'}
];
//handle tab click event
$scope.tabClick = function (index) {
angular.forEach($scope.tabs, function (tab) {
tab.active = false;
});
$scope.selectedTab = index;
$scope.tabs[index].active = true;
};
After that matchesmenu.html load content using ng-include option
<div class="row clearfix">
<div class="col-xs-12">
<ul class="nav nav-tabs">
<li role="presentation" ng-class="{'active':tab.active}" ng-repeat="tab in tabs" ><a href="#/log/{{tab.type}}" >{{tab.title}}</a></li>
</ul>
</div>
</div>
<div class="row clearfix">
<div class="col-xs-12" ng-repeat="tab in tabs" ng-model="tab" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
<div ng-include src="tab.url" ng-if="tab.active"> </div>
</div>
</div>
</div>
I got an workaround here and need some help. It is a tree of categories. Some categores can be chosen by a checkbox.
I thougt the cleanest way to do that is via direction. On a <li kw-category-node> element put a on('click', function()) handler, which then does the choosing work (add object to data etc.).
So I came up with this HTML
<script type="text/ng-template" id="category_renderer.html">
<div ng-if="true == true" ng-mouseenter="over = true" ng-mouseleave="over = false">
<input type="checkbox"
ng-model="assignedCategories[category.category_id]"
ng-if="category.childs.length == 0"
ng-click="toggleCategory(category)">
</input> {{ category.name }}
<a href ng-if="over" ng-click="categories.remove(category)">
<small> <i class="fa fa-times"></i> Entf </small>
</a>
</div>
<ul class="list-unstyled">
<li ng-repeat="category in category.childs"
ng-include="'category_renderer.html'"
kw-category-node>
</li>
</ul>
</script>
<ul class="list-unstyled" kw-category-tree>
<li ng-repeat="category in categories.tree"
ng-include="'category_renderer.html'"
kw-category-node>
</li>
</ul>
And a directive like that
admin.directive('kwCategoryNode', ['$interval', 'dateFilter', function($interval, dateFilter) {
function link(scope, element, attrs) {
element.find('input').on('click', function() {
alert("wow, what a click!");
});
}
But element.find("input") wont give me that input element. Maybe the DOM is not loaded completly or I'm just in tilt.
Thanks
I have a list of items. I want to select them by clicking. Selected item will be sent to server. At a time only one item can be selected. So, for this I need a variable where I can store the item. Please no jQuery. I am looking for simple Javascript AngularJS. Here is my html. After selecting one item, it will automatically go to another list, which I kept in ng-if=false. Suppose, I click on item1 then it will show the list of list1, list2 and list3. Now, let's select list2. Now item1 and list2 will both go to server.
<div ng-if="true"class="items">
<ul ng-if="true">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
<ul ng-if="false">
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</div>
In my fiddle, if I select one date then it should list of dates, which is given ng-if='false'
fiddle link :- http://jsfiddle.net/abhijitloco/k6jso1u3/
Look
function AppController($scope) {
$scope.selectedItem = [];
$scope.clickItem = function(item) {
$scope.selectedItem.push(item);
}
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="AppController">
{{selectedItem}}
<div class="items">
<ul ng-if="true">
<li ng-click="clickItem('Item1');">Item1</li>
<li ng-click="clickItem('Item2');">Item2</li>
<li ng-click="clickItem('Item3');">Item3</li>
</ul>
<ul ng-repeat="obj in selectedItem">
<li>{{obj}}</li>
</ul>
</div>
</div>
<div class="items">
<ul ng-if="!selectedItem" ng-model="selectedItem">
<li ng-click="selectedItem = item1">Item1</li>
<li ng-click="selectedItem = item2">Item2</li>
<li ng-click="selectedItem = item3">Item3</li>
</ul>
<ul ng-if="selectedItem" ng-model="selectedList">
<li ng-click="selectedList = list1">list1</li>
<li ng-click="selectedList = list2">list2</li>
<li ng-click="selectedList = list3">list3</li>
</ul>
</div>
You have selected item in selectedItem model and selected list in selectedList model.
Assuming that yours lists and items are dynamic I would propose something like the following:
constroller:
$scope.lists = [list1, list2, list2...]
$scope.items = [item1, item2, item3...]
$scope.selectItem = function(index){
$scope.selectedItem = $scope.items[index];
};
$scope.sentToServer = function(index){
$scope.lists[index].push($scope.selectedItem);
//send $scope.lists[index] and $scope.selectedItem;
};
view:
<div ng-if="true" class="items">
<ul ng-if="true">
<li ng-click="selectItem($index)" ng-repeat="item in items>{{item}</li>
</ul>
<ul ng-if="selectedItem">
<li ng-click="sendToServer($index)" ng-repeat="lists in lists>{{'list' + $index}</li>
</ul>
</div>
<div ng-if="true"class="items">
<ul ng-repeat='entry in list1'>
<li ng-click='clickMe(entry.name)'>{{entry.name}}</li>
</ul>
<ul ng-repeat='entry1 in list2' ng-if="secondList">
<li ng-click='sendToserver(entry1.name)'>{{entry1.name}}</li>
</ul>
</div>
contorller.js
$scope.optionsSelected = {};
$scope.clickMe = function(text){
$scope.optionsSelected['first'] = text;
$scope.secondList = true; // show second list
// you can initialize second list here OR reset values before it is sent to sever
}
$scope.sendToserver = function(text){
$scope.optionsSelected['second'] =text;
$scope.textSelected = $scope.optionsSelected;
// $scope.textSelected contains both options you just selected.
}
You can do this with couple of ngClick and ngIf directives. For example:
$scope.showType = 1;
$scope.selected = {};
$scope.selectDate = function(date) {
$scope.showType = 2;
$scope.selected.date = date;
};
$scope.selectTime = function(time) {
$scope.selected.time = time;
$http.post('date/selected', $scope.selected); // post wherever you need
};
where in HTML you would have
<ul class="datepicker text-center" ng-if="showType === 1">
<li ng-click="selectDate(date)" ng-repeat="date in dateValues">{{date | date:'EEE dd'}}</li>
</ul>
<ul class="datepicker text-center" ng-if="showType == 2">
<li ng-click="selectTime(time)" ng-repeat="time in timeValues">{{time}}</li>
</ul>
And here is your code updated:
Demo: http://plnkr.co/edit/SjxbyfboJlkLnOeDBhdn?p=preview
I have 3 different directives, <one>, <two>, <three>.
I want to loop through their ids and insert them in an ng-repeat
<ul>
<li ng-repeat="panel in panels">
<panel>
<!-- panel.id would give me "one", "two" etc. -->
<!-- First insert <one> then <two> etc -->
</panel>
</li>
</ul>
The resulting html I would like to achieve then would be:
<ul>
<li>
<panel>
<one></one>
</panel>
</li>
<li>
<panel>
<two></two>
</panel>
</li>
<li>
<panel>
<three></three>
</panel>
</li>
</ul>
And since each has its template:
<ul>
<li>
<div class="panel">
<div id="one">
</div>
</div>
</li>
<li>
<div class="panel">
<div id="two">
</div>
</div>
</li>
<li>
<div class="panel">
<div id="three">
</div>
</div>
</li>
</ul>
I am not sure how to do this? Is this possible? do I have to ng-compile to have a directive inside a directive?
Should I use just one directive and use an ng-switch?
Am I missing a more straightforward approach?
I know this works:
make a <panel-content> directive.
I include this on the <panel> directive:
make an
<ng-switch="panel.id">
<ng-switch-when="one">
<ng-switch-when="twp">
<ng-switch-when="three">
</ng-switch>`
But it seems cumbersome.
The way that I normally do this is use one directive that picks the specific directive in the link function. That prevents all of the ng-switch bloat.
html
<panel type='one'></panel>
<panel type='two'></panel>
js
angular.module('app').directive('panel', ['$compile', '$injector', function ($compile, $injector) {
return {
restrict: 'E',
scope: {
type: '='
},
link: function ($scope, element, attrs, vm) {
var template;
switch($scope.type){
case 'one':
template = '<one></one>';
break;
case 'two':
template = '<two></two>';
break;
}
element.html(template);
$compile(element.contents())($scope);
}
};
}]);
Here's a fiddle showing this in action: http://jsfiddle.net/7cufjqs3/1/
If you're willing to live with an extra div between your directive and panel element I created a dynamic directive that knows nothing about the name of the element, and creates it dynamically:
Usage:
<li ng-repeat="panel in panels">
<panel>
<dynamic-directive element="panel.id"></dynamic-directive>
</panel>
</li>
Directive:
myApp.directive('dynamicDirective', function($compile) {
return {
restrict: "E",
replace: true,
template: "<div></div>",
scope: {
element: "="
},
link: function(scope, element, attrs) {
var elm = '<' + scope.element + '></' + scope.element + '>';
element.html(elm);
$compile(element.contents())(scope);
}
}
});
Fiddle
I think a the switch is the best approach because it's most readable in your html
<ul>
<li ng-repeat="panel in panels">
<panel ng-switch on="panel.id">
<div ng-switch-when="one"><one>1</one></div>
<div ng-switch-when="two"><two>2</two></div>
<div ng-switch-when="three"><three>3</three></div>
</panel>
</li>
</ul>
http://plnkr.co/edit/ygy6coKCyQNGBoKmSES0?p=preview