Followed by the article How do I hide the tabs in Ionic Framework, the hide-tabs directive works fine.
But it has some problem when nested view.
As you can see in the codepen http://codepen.io/WilsonFpz/pen/MaxaQR, when the user navigate from home->level1->level2,
the level2`s tabs show again, but the $root.hideTabs is false as printing out.
var module = angular.module('app.directives', []);
module.directive('hideTabs', function($rootScope) {
return {
restrict: 'A',
link: function(scope, element, attributes) {
scope.$watch(attributes.hideTabs, function(value){
$rootScope.hideTabs = value;
});
scope.$on('$destroy', function() {
$rootScope.hideTabs = false;
});
}
};
});
Please give me some hints. Thanks.
Related
I googled my problem but could not get a solution. I hope now I will definitely get the one.
I am making a directive in angular JS. for making a clickable link on repeatable text .
Lets say, I have some vouchers which i want to show using a ng-repeat and I want to make a directive which opens a modal with details of all the transactions under it.
My problem is, the ng-repeat is inserting the modal template in every loop which I think is making the DOM slow.
Directive:
.directive('viewVoucher', function($rootScope, CommonFunctionService, Server, $state, TplBaseUrl) {
return {
restrict: 'E',
scope: {
voucherNumber:'#',
voucherDate:'#',
},
link: function(scope, element, attrs) {
},
templateUrl: TplBaseUrl()+'commonTpl/voucherViewModal.php',
controller: function($scope, $element) {
$scope.title = "Angularjs Bootstrap Modal Directive Example";
$scope.showModal1 = false;
$scope.hide = function(){
$scope.showModal1 = false;
}
$scope.modalOneShown = function(){
//console.log('model one shown');
var params = {
};
Server.getInstance({apiName: 'someAPI'})
.request('functionName',params,function(data) {
if(CommonFunctionService.handleResponse(data)) {
$scope.voucherDetails = data.response;
}
});
}
$scope.modalOneHide = function(){
//console.log('model one hidden');
}
},
};
})
If I use the above directive in ng-repeat, the modal template is getting inserted everytime
I have this Angular JS directive for Google Places auto complete and it's working fine. My problem is that when I try it on a mobile browser like Google Chrome or Safari, well mobile, the pac item, .pac container doesn't allow me to click on the drop down. This is my directive:
angular.module('wtSharedUtil').directive('googleplace', [ function() {
return {
restrict: 'A',
require : '?ngModel',
link: function (scope, element, attrs, model) {
var options = {
};
scope.gPlace = new google.maps.places.Autocomplete(element[0], options);
google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
scope.$apply(function() {
model.$setViewValue(element.val());
});
});
}
};
}]);
I found a jQuery solution, but it is not a good solution:
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
console.log('disabletap ready')
}
}, '.pac-container');
This is not ionic, it is just angular. I would like an angular solution.
How can I do that?
I have following directive
var app = angular.module('TestApp', []);
app.directive('selectMultiple', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
$(element).find('select').material_select();
$(element).find("ul li").first().click(function() {
$(element).find("ul li:not(:first-child)").each(function(index) {
$(this).find("input[type=checkbox]").prop("checked", $(element).find("ul li").first().find("input[type=checkbox]").prop("checked"));
});
});
}
};
});
And I am also using dirpagination on same page, Its working , but when page changed, means DOM gets new elements, whatever written in directive is completely not working.
AM I missing any thing, I am new to angular so might be I'll be missing some things
Thanks
I have couple of links in the header. But the pop-up nested under the other controller. I am using a service call for the pop-up here.
clicking on the header link, how can i open the pop-up which nested in the other controller.
And i need to update the content of the pop-up according to the link what the user clicks. for that, i included the html (using ng-include)
here is my code and demo :
var app = angular.module('myApp', []);
app.service('modalService', function() {
this.width = 100;
this.height = 100;
});
app.directive('modalDialog', function(modalService) {
return {
restrict: 'E',
scope: {
show: '='
},
replace: true, // Replace with the template below
transclude: true,
link: function(scope, element, attrs) {
},
templateUrl: "modal.html"
};
});
app.controller('MyCtrl', ['$scope', function($scope, modalService) {
$scope.modalShown = false;
}]);
app.controller('header', ['$scope', 'modalService', function($scope, modalService) {
$scope.modalShown = false;
$scope.toggleModal = function(link) {
console.log(link);
$scope.linkInfo = link+'.html';
$scope.modalShown = !$scope.modalShown;
};
}]);
Live demo
In case the way what i do is wrong, please correct me. at present the fuction is calls and gettting console. but pop-up not opening with appropriate content.
You can use the modal service of angular-UI library angular-ui#modal
If you want to just create something simple, you have to change your code in following ways:
I would recommend using ngIf for showing/hiding your modalDialog directive. With it, it will be rendered when the expression becomes truthy and you can get the right template each time.
Do not transclude since you don't have static templates. You have to compile the template on runtime (using $compile service). Also create a new scope for that template.
app.directive('modalDialog', function(modalService, $rootScope, $compile, $templateCache) {
return {
restrict: 'E',
scope: {
show: '=',
templateUrl: '='
},
link: function(scope, element, attrs) {
var template = $templateCache.get(scope.templateUrl);
var modalScope = $rootScope.$new();
var modalElement = angular.element(template);
element.append(modalElement);
$compile(modalElement)(modalScope);
},
templateUrl: "modal.html"
};
});
Note that there are still issues. Your placing of modal into arbitrary location into a DOM may not work (not all browsers behave correctly when playing with positioning). So I would recommend creating a service that would append and render the modal just below the element.
It seems everyone is asleep on the angularjs google group :)
Here's my problem:
I have a select in a directive, and I want to bind a function to the 'change' event of that select.
My problem is that when I use this directive in an ng-repeat loop, the bind to the event doesn't work anymore (why ??).
EDIT:
In my real case, there are three or more <select>, created and populated with data from a json file.
Here is a simplified version of the directive, and I made a plunker as well.
angular.module('test', [])
.directive('mySelect', function() {
var baseElt = angular.element('<select><option>1</option><option>2</option></select>');
return {
restrict: 'E',
compile: function(topElement) {
var elt = baseElt.clone();
topElement.append(elt);
return function(scope, element, attributes, ngModelCtrl) {
elt.bind('change', function() {
alert("change !");
});
};
}
};
});
you need
app.directive('mySelect', function() {
return {
restrict : 'E',
template : '<select><option>1</option><option>2</option></select>',
link : function(scope, element, attributes, ngModelCtrl) {
element.bind('change', function() {
console.log("change !");
});
}
}
});
Demo: Fiddle