I am trying to modify the last example (Create Components) on http://angularjs.org/ so that when switching the tab, the url will change. The complete code:
angular.module('components', [])
.directive('tabs', function ($location) {
return {
restrict: 'E',
transclude: true,
scope: {},
controller: function ($scope, $element) {
var panes = $scope.panes = [];
$scope.$watch(function () {
return $location.path();
}, function (url) {
//select pane
});
$scope.select = function (pane) {
angular.forEach(panes, function (eachPane, key) {
eachPane.selected = false;
if (pane == eachPane) {
if (key == "1") {
$location.path("Pluralization");
} else {
$location.path("Localization");
}
}
});
pane.selected = true;
};
this.addPane = function (pane) {
panes.push(pane);
console.log("addPane");
if (panes.length == 2) {
if ($location.path() == "/Pluralization") {
$scope.select(panes[1]);
} else {
$scope.select(panes[0]);
}
}
}
},
template:
'<div class="tabbable">' +
'<ul class="nav nav-tabs">' +
'<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">' +
'{{pane.title}}' +
'</li>' +
'</ul>' +
'<div class="tab-content" ng-transclude></div>' +
'</div>',
replace: true
};
})
.directive('pane', function () {
return {
require: '^tabs',
restrict: 'E',
transclude: true,
scope: {
title: '#'
},
link: function (scope, element, attrs, tabsCtrl) {
tabsCtrl.addPane(scope);
},
template:
'<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
'</div>',
replace: true
};
})
angular.module('app', ['components'])
.controller('BeerCounter', function ($scope, $locale) {
$scope.beers = [0, 1, 2, 3, 4, 5, 6];
if ($locale.id == 'en-us') {
$scope.beerForms = {
0: 'no beers',
one: '{} beer',
other: '{} beers'
};
} else {
$scope.beerForms = {
0: 'žiadne pivo',
one: '{} pivo',
few: '{} pivá',
other: '{} pív'
};
}
});
It works all well except if user uses clicks go back history button, the content doesn't change. I've got
$scope.$watch(function () {
return $location.path();
}, function (url) {
//select tab according to url
});
to watch the url change but can't get it work. My logic is when url changes (by go back button) pane should be selected according to the url. Also I think this part
if (panes.length == 2) {
if ($location.path() == "/Pluralization") {
$scope.select(panes[1]);
} else {
$scope.select(panes[0]);
}
}
shouldn't be in addPane()
Anyway, I'm new to Angular and if you think there is a better way to do this please let me know.
Related
I have a directive element:
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<ul>' +
'<li ng-show="hideItem">Home</li>' +
'<li ng-show="hideItem">Products</li>' +
'<li ng-show="!hideItem">Cart</li>' +
'<li ng-show="hideItem">Contact Us</li>' +
'</ul>',
link: function(scope, element, attrs) {
var shouldHide = myService.getData();
if (shouldHide === true) {
scope.hideItem = true
}
}
};
The link function performs a call to a service, the result is either true or false.
If true, i want hideItem to be set to true within my ng-show.
HTML structure:
<section ng-controller="NavigationController">
<i class="home"></i>
<i class="bell"></i>
<i class="phone"></i>
<my-directive></my-directive>
<button>Submit</button>
</section>
DEMO
you can actually just vm.hideItem = myService.getData(); since you want the boolean's value anyway
return {
restrict: 'E',
replace: true,
controllerAs: 'vm',
transclude: true,
template: '<ul>' +
'<li ng-show="vm.hideItem">Home</li>' +
'<li ng-show="vm.hideItem">Products</li>' +
'<li ng-show="!vm.hideItem">Cart</li>' +
'<li ng-show="vm.hideItem">Contact Us</li>' +
'</ul>',
link: function(scope, element, attrs, vm) {
vm.hideItem = myService.getData();
},
controller: function(){
}
};
I added controllerAs: 'vm' it's much more manageable by assigning a name to your controller and attach variables to it
You have to watch it :
scope.$watch(function(){
return myService.getData();
}, function(newValue){
scope.hideItem = newValue;
});
This is only if your service is not doing server-side requests, otherwise you'll spam the server.
I think getData method can be called from anywhere in your application.
And you want to keep track of these changes in your directive. In this case, you can use the callback.
Live example on jsfiddle.
angular.module('ExampleApp', [])
.controller('ExampleController', function($scope, myService) {
$scope.resolve = function() {
myService.getData().then(function() {
console.log('resolved from button resolve');
})
}
myService.getData().then(function() {
console.log('resolved from controller loading');
})
})
.directive('exampleDirective', function(myService) {
return {
restrict: "E",
scope: {
value: "="
},
template: `<div>hidden={{hidden}} value={{value}} <span ng-show="hidden">ng-show="hidden"</span><span ng-show="!hidden">ng-show="!hidden"</span></div>`,
link: function(scope) {
scope.hidden = false;
myService.addCallback(function(hideItem) {
scope.hidden = hideItem;
console.log('callback resolved with value ' + scope.value + ' and hide is ' + hideItem);
});
}
}
})
.service('myService', function($q, $timeout) {
var callbacks = [];
return {
getData: function() {
var defered = $q.defer();
//simulate $http call
$timeout(function() {
defered.resolve();
//simulate answer from server
var res = Math.round(Math.random() * 10) >= 5;
angular.forEach(callbacks, function(c) {
//call callback with result
$q.resolve(res, c);
});
}, 1000);
return defered.promise;
},
addCallback: function(callback) {
callbacks.push(callback);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="ExampleApp">
<div ng-controller="ExampleController" id="ExampleController">
<button ng-click="resolve()">
call getData
</button>
<example-directive value="12"></example-directive>
<example-directive value="'ab'"></example-directive>
</div>
</div>
When you anywhere using the method of your getData directive knows that.
i am using angularjs-ui tabs in my app.
angular.module('bootstrap.tabset', [])
.directive('tekplntabsets',['tabsetServ', function (tabsetServ) {
return {
restrict: 'E',
replace: true,
transclude: true,
controller: function ($scope) {
$scope.templateUrl = '';
var tabs = $scope.tabs = [];
var controller = this;
this.selectTab = function (tab) {
angular.forEach(tabs, function (tab) {
tab.selected = false;
});
tab.selected = true;
tabsetServ.setTabId(tab.tabid);
};
this.setTabTemplate = function(templateUrl) {
$scope.templateUrl = templateUrl;
};
this.setTabController = function(tabCtrl) {
$scope.tabCtrl = tabCtrl;
};
this.getTabController = function() {
return $scope.tabCtrl;
};
this.removeTab = function(tab) {
var index = tabsetServ.removeTab(tab);
this.selectTab(tabs[index - 1]);
};
this.addTab = function (tab) {
if (tabs.length == 0) {
controller.selectTab(tab);
}
tabs.push(tab);
controller.selectTab(tab);
};
},
template:
'<div class="row-fluid flexbox flexboxContent divHeight100">' +
'<div class="row-fluid">' +
'<div class="nav nav-tabs" ng-transclude></div>' +
'</div>' +
'<div class="row-fluid flexbox flexboxContent divHeight100">' +
'<ng-include src="templateUrl" class="flexbox flexboxContent divHeight100" ></ng-include>' +
'</div>' +
'</div>'
};
}])
.directive('tekplntab', function () {
return {
restrict: 'E',
replace: true,
require: '^tekplntabsets',
scope: {
title: '#',
templateUrl: '#',
tabid: '#',
closable: '#',
tabicon: '#',
controller:'#'
},
link: function (scope, element, attrs, tabsetController, $route) {
tabsetController.addTab(scope);
scope.select = function () {
tabsetController.selectTab(scope);
};
scope.$watch('selected', function () {
if (scope.selected) {
tabsetController.setTabTemplate('');
tabsetController.setTabTemplate(scope.templateUrl);
// scope.$apply();
//$route.reload();
//if (scope.$parent.tektab.ctrl !== "" && scope.$parent.tektab.ctrl !== "DashboardCtrl") {
// var ctrl = scope.$parent.tektab.ctrl;
// scope.$parent.tektab.ctrl = "";
// scope.$parent.tektab.ctrl = ctrl;
//}
//if (scope.$root.$$phase !== '$digest' && scope.$$phase !== '$digest') {
// scope.$apply();
// }
//scope.$watch('scope.tabid', function (randomValue) {
// scope.$apply();
//}); ng-controller="{{controller}}"
}
});
scope.removeTab = function (id) {
tabsetController.removeTab(id);
};
},
template:
'<li ng-class="{active: selected}" >' +
'<a href="" ng-click="select()"><div class="pointerDiv {{ tabicon }}" ng-show="{{closable}}"></div> {{ title }} ' +
'<button ng-click="removeTab(title)" class="TabClose" ng-show="{{closable}}">x</button></a>' +
'<input type="hidden" value="{{ tabid }}"></input>' +
'</li>'
};
});
When I am using this directive to open 2 tabs that use different controllers it works well.
The problem occurs when I want to switch between 2 tabs that using same controller. (for example, when I open 2 different projects and I want to switch between project number 1 and project number 2, the tab does not load all the data from project number 2 !!).
I don't want to use angular-ui-router.
project 1 and project 2 uses same partial html
I managed to solve the problem by using Boradcasting messages
I am opening a dialog-box on click of button.I want to add endless scroll in that.
Problem:
When user scrolls at the end of dialog-box i want to call addMoreData() written in controller.
HTML of Dialog-box:
<modal-dialog show='modalShown' width='60%' height='325px' >
<div id='diaogContainer'>
<p>Modal Content Goes here<p>
</div>
</modal-dialog>
Controller:
sampleApp.controller('view3Controller', function($scope) {
$scope.modalShown = false;
$scope.toggleModal = function() {
$scope.modalShown = !$scope.modalShown;
}
**$scope.showMore = function(){
console.log('showMore');
}**
});
Directive of Dialog-box:
sampleApp.directive('modalDialog', function() {
return {
restrict: 'E',
scope: {
show: '='
},
replace: true, // Replace with the template below
transclude: true,
link: function(scope, element, attrs) {
scope.dialogStyle = {};
if (attrs.width)
scope.dialogStyle.width = attrs.width;
if (attrs.height)
scope.dialogStyle.height = attrs.height;
scope.hideModal = function() {
scope.show = false;
};
},
template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay'ng-click='hideModal()'></div><div class='ng-modal-dialog' hello **scrolly='showMore()'** ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>"
};
});
Directive to load more data:
sampleApp.directive('hello', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var raw = element[0];
element.bind('scroll', function () {
console.log(raw.scrollTop +'-------'+raw.offsetHeight+'----'+raw.scrollHeight);
if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
// here is problem
// I am not able to call function through this attr
//
**scope.$apply(attrs.scrolly);**
}
});
}
};
});
You can't pass in a function to a directive through an attribute, you can however pass it through an isolate scope. Pass a reference to the function you wish to call to the directive:
sampleApp.directive('hello', function () {
return {
restrict: 'A',
scope:{
onScrollEnd:'&'
},
link: function (scope, element, attrs) {
var raw = element[0];
element.bind('scroll', function () {
console.log(raw.scrollTop +'-------'+raw.offsetHeight+'----'+raw.scrollHeight);
if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
scope.onScrollEnd();
}
});
}
};
});
Now assuming you have the addMoreData() function defined on your controller, you can pass it to the directive this this:
<div hello on-scroll-end='addMoreData()'></div>
EDIT
I think the problem is that the hello directive can't access functions on the parent controller since the modalDialog directive is using an isolated scope, therefore making everything o the parent controller invisible. Pass the function to through the isolate scope of the modalDialog Directive as well:
scope: {
show: '=',
onScrollEnd:'&'
},
you can try like this.
Directive part
var module = angular.module('direc');
module.directive("direcApp", ['$timeout', function ($timeout) {
return {
restrict: 'E',
templateUrl: "template/template.html",
compile: function (iel, iattr) {
return function (scope, el, attr) {
}
},
scope: {
type: "#",
items: '=',
onClick: '&',
val: "="
},
controller: function ($scope) {
$scope.selectItem = function (selectedItem) {
$scope.val = selectedItem;
if (angular.isFunction($scope.onClick)) {
$timeout($scope.onClick, 0);
}
};
}
};
}]);
Controler part
var app = angular.module('app', ['direc']);
app.controller("appCtrl", ['$scope', '$http', function ($scope, $http) {
var t = {
count: function () {
return $scope.$$watchersCount; // in angular version 4 get total page listener
},
val1: "",
onClick: function () {
console.log($scope.data.val1);
},
items: [{ text: 'Seçenek 1', value: '1' },
{ text: 'Seçenek 2', value: '2' },
{ text: 'Seçenek 3', value: '3' },
{ text: 'Seçenek 4', value: '4' },
{ text: 'Seçenek 5', value: '5' }]
};
angular.extend(this, t);
}]);
Html part
<div ng-controller="appCtrl as data">
<div><b>Watcher Count : {{data.count()}}</b></div>
<direc-app items="data.items"
val="data.val1"
on-click="data.onClick1()"
>
</selection-group>
</div>
Add data as parameter to directive: scope: { data: '='}, and in directive just data.push({name:'i am new object'})
Add function parameter to directive as suggested in previous answer.
I am created tooltip directive. but data comes from api , so on page load directive initializes and then data is loaded through api.api data comes later hence directive is not initialized properly .
how can i handle this ?
HTML::
<strong href="#" pop-over items="result" title="detailes" display-length="5">{[{ result.name}]}
Javascript :
listingApp.directive('popOver', function ($compile) {
var itemsTemplate = "<ul class='unstyled'><li>{{items}}</li></ul>";
var getTemplate = function (contentType) {
var template = '';
switch (contentType) {
case 'items':
template = itemsTemplate;
break;
}
return template;
}
return {
restrict: "A",
transclude: true,
scope: {
items: '=',
title: '#',
//popContent: '=',
displayLength:'#'
},
transclude: true,
template: "<span ng-transclude></span>",
link: function (scope, element, attrs) {
debugger;
// console.log('^^^^^^^^^^^^^^^'+attrs.popContent);
var popOverContent;
if (scope.items) {
var html = getTemplate("items");
popOverContent = $compile(html)(scope);
}
var options = {
content: popOverContent,
placement: "bottom",
html: true,
title: scope.title,
trigger: "hover"
};
if ((scope.items || '').length > attrs.displayLength) {
$(element).find('.display_data').text(scope.items.substring(0, attrs.displayLength));
element.attr('title', scope.items);
$(element).find('.view_more').popover(options);
} else {
$(element).find('.display_data').text(scope.items);
}
}
};
});
try wrapping your .popover plugin with a $timeout:
$timeout(function() {
$(element).find('.view_more').popover(options);
});
I have created directive in Angular.I am calling popover directive from mybox. i wish to make popover directive Active only after click on Enable button .
I thought for ng-include but incase of directive how can i use ?
Please suggest ....
Fiddle :: http://jsfiddle.net/JNqqU/278/
Directive Code ::
var bootstrap = angular.module("bootstrap", []);
bootstrap.directive('myBox', function ($compile) {
return {
restrict: "E",
transclude: true,
template: "<span>Hello In side Box <a href='#' pop-over items='items' title='Mode of transport'>Show Pop over</a> </span>",
link: function (scope, element, attrs) {
var popOverContent;
if (scope.items) {
var html = getTemplate("items");
popOverContent = $compile(html)(scope);
}
var options = {
content: popOverContent,
placement: "bottom",
html: true,
title: scope.title
};
$(element).popover(options);
},
scope: {
items: '=',
title: '#'
}
};
});
bootstrap.directive('popOver', function ($compile) {
var itemsTemplate = "<ul class='unstyled'><li ng-repeat='item in [1,2,3,4,5,6,7,8]'>{{item}}</li></ul>";
var getTemplate = function (contentType) {
var template = '';
switch (contentType) {
case 'items':
template = itemsTemplate;
break;
}
return template;
}
return {
restrict: "A",
transclude: true,
template: "<span ng-transclude></span>",
link: function (scope, element, attrs) {
var popOverContent;
if (scope.items) {
var html = getTemplate("items");
popOverContent = $compile(html)(scope);
}
var options = {
content: popOverContent,
placement: "bottom",
html: true,
title: scope.title
};
$(element).popover(options);
},
scope: {
items: '=',
title: '#'
}
};
});
bootstrap.directive( 'dismissPopovers', [ '$http', '$templateCache', '$compile', '$parse', function ( $http, $templateCache, $compile, $parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('mouseup', function(e) {
var clickedOutside = true;
$('.popover-link').each(function() {
if ($(this).is(e.target) || $(this).has(e.target).length) {
clickedOutside = false;
return false;
}
});
if ($('.popover').has(e.target).length) {
clickedOutside = false;
}
if (clickedOutside) {
$('.popover').prev().click();
}
});
}
};
}]);
You could override the bootstrap directive to pass it a parameter wether it should display the popver or not. First add a variable to the directive attributes :
Controller :
$scope.popOverShouldOpen = whatYouWantThere;
Template :
<div pop-over pop-over-should-open="popOverShouldOpen"></div>
Then add it to the directive scope :
scope: {
items: '=',
title: '#',
popOverShouldOpen: "="
}
Then put "if" statements inside the link function :
link: function (scope, element, attrs) {
if( scope.popOverShouldOpen === true ){
var popOverContent;
if (scope.items) {
var html = getTemplate("items");
popOverContent = $compile(html)(scope);
}
var options = {
content: popOverContent,
placement: "bottom",
html: true,
title: scope.title
};
$(element).popover(options);
}
},
Or you could simply do this, depending on your context :
<div pop-over ng-show="popOverShouldOpen"> Hello there ! </div>
<div ng-hide="popOverShouldOpen"> Hello there ! </div>
Of course this last one is a quick hack. For a massive usage prefer the first !