Angular custom directive issue - javascript

I created a custom directive which has a chart and another div.
On mouse hover on my chart I need to hide show that div.
<div id="chart">
<div id="extraDetails" ng-show="showpreview">
<p>Show some list</p>
</div>
</div>
module.directive('d3Heatmap', function () {
return {
restrict: 'E',
replace: true,
scope: {
showpreview: "="
},
templateUrl:'heatMapTemplate.html',
link:function(scope,element, attrs){
}}); code here
On mouseover and out, i change the value of showpreview. But the div extraDetails does not hide or show up. Will appreciate any inputs.

Related

AngularJs: Auto scroll enclosing div when using angular bootstrap typeahead

I have a parent div within which I have bootstrap angular typeahead. When the typeahead is loaded and displayed, the parent div should auto scroll to the bottom.
I have the following html code
<div class="row">
<div id="myQuestion" class="col-sm-9" style="overflow-y: auto;height: 100%;">
<span>
<input type="text" style="overflow:auto" ng-model="selected"
typeahead="item for item in filterInput($viewValue) | limitTo:10"
typeahead-on-select='onSelect($item)'>
</span>
</div>
</div>
The parent div should scroll to the end once the typeahead options are filtered and rendered.
I have written the directive for auto scrolling but I am not sure where to add this directive
myDirective.js
myApp.directive('myRepeatDirective', function () {
return {
restrict: 'A',
link: function (scope, element, attr) {
var questionInput = document.getElementById("myQuestion");
questionInput.scrollIntoView(true);
questionInput.focus();
}
}
});
How can I achieve auto scrolling of parent div once the type ahead loads?

Angular Infinite Scroll: scroll bar on body not on div

I implementing infinite scroll in my web app using angularjs. I found this useful directive on net Infinite Scroll, but the problem is this can only be implemented inside div not in the scroll bar body:
app.directive('infinityscroll', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.bind('scroll', function () {
if ((element[0].scrollTop + element[0].offsetHeight) == element[0].scrollHeight) {
//scroll reach to end
scope.$apply(attrs.infinityscroll)
}
});
}
}
});
Here is my html codes:
<div infinityscroll="NextPage()" style="height:700px; overflow:auto;" >
<div ng-repeat="item in listItems">
<img ng-src="{{item.picture}}" alt="broken" style="">
</div>
</div>
when i remove the inline css it won't work.so how can i change the infinite scroll in the body instead of div?
Try this:
<body infinityscroll="NextPage()" style="height: 1000px; overflow:auto;">
and remove infinitescroll initialization from your div.
You might need to adjust height a bit, based on your screen-size.
Hope this solves your issue.. :)

AngularUI popover style change of parent element on click

I have a pretty specific problem. Recently I figured out how to add a close button to an AngularUI popover. Originally the user had to click on the popover parent to open and to close it, so I had functionality added in that changed the style of that element on a click event. With the addition of the close button, I want to simulate the same effect when the user clicks it. I set up a plnkr here to play with.
So far I've tried to add ng-click="toggle(); style=!style" in the popover template, but that didn't work. I think that I have to access the style variable in the popoverToggle directive, but I don't know how to do that. It might also just be possible to manipulate it in the HTML.
Popover template
<div><span ng-click="toggle()">X</span></div>
<p>content</p>
popoverToggle.js
angular.module('app')
.config(function($tooltipProvider) {
$tooltipProvider.setTriggers({'open': 'close'});
})
.directive('popoverToggle', function($timeout) {
return {
scope: true,
link: function(scope, element, attrs) {
scope.toggle = function() {
$timeout(function() {
element.triggerHandler(scope.openned ? 'close' : 'open');
scope.openned = !scope.openned;
scope.style = !scope.style; // doesn't do anything either
});
};
return element.on('click', scope.toggle);
}
};
});
index.html
<span ng-class="{'border-gray': style}" style="margin: 40px" ng-click="style=!style" class="red-btn">
<span popover-placement="bottom" popover-template="'popover-template.html'"
popover-trigger="open" popover-append-to-body="true" popover-toggle>click me</span>
</span>
The solution is very straightforward, all that needs to be changed is the style variable. Simply change it to $scope.style, like so:
popover-template.html
<div><span ng-click="toggle(); $scope.style=!$scope.style">X</span></div>
<p>content</p>
index.html
<span ng-class="{'border-gray': $scope.style}" style="margin: 40px" ng-click="$scope.style=!$scope.style" class="red-btn">
<span popover-placement="bottom" popover-template="'popover-template.html'"
popover-trigger="open" popover-append-to-body="true" popover-toggle>click me</span>
</span>

data-ng-model values are not being updated while Using Bootstrap Time Picker

The values i choose from Time picker is not updating,but when i removed time picker and using normal textbox updating works what is wrong with time picker or my code ?
<div data-ng-repeat="mondayBhr in businessHour.mon" class="form-group">
<label class="col-sm-1 label-group" for="mondayStoreOpentimingsedit">Open</label>
<div class="form-group">
<div class="bootstrap-timepicker">
<input id="mondayStoreOpentimingsedit" name="mondayStoreOpentimingsedit" ng-model="mondayBhr.store[0].open" style="max-height:25px" class="col-md-2" />
<script>
$('#mondayStoreOpentimingsedit').timepicker({
showMinutes:true,
showMeridian:false,
pick12HourFormat: true
}).next().on(ace.click_event, function(){
$(this).prev().focus();
});
</script>
</div>
</div>
</div>
Thanks a lot for the Help in Advance !!
Always use directive while using jquery plugin to interact AngularJS
Markup
<input id="mondayStoreOpentimingsedit" time-picker name="mondayStoreOpentimingsedit"
ng-model="mondayBhr.store[0].open" style="max-height:25px" class="col-md-2" />
Directive
app.directive('timePicker', function() {
return {
restrict: 'A',
reuqire: 'ngModel',
link: function(scope, element, attrs, ngModel) {
element.timepicker({
showMinutes: true,
showMeridian: false,
pick12HourFormat: true,
change: function(time) {
//need to run digest cycle for applying bindings
scope.$apply(function() {
ngModel.$setViewValue(time);
});
}
}).next().on(ace.click_event, function() {
$(this).prev().focus();
});
}
}
});

How to set ng-dirty/ng-pristine on custom element directive with input inside template?

I have build a form element using a custom directive in AngularJS.
Custom element in form:
<form class="login-form" name="loginForm">
<elm-input-text class="has_bottomSpace" name="email" ng-model="email" required></elm-input-text>
</form>
Directive:
app.directive("elmInputText", function(){
return {
restrict: 'E',
replace: true,
scope: {
ngModel: '=ngModel',
name: '#'
},
templateUrl: 'src/templates/input-text-template.html'
};
});
Template:
<div class="inputText">
<input class="inputText-input" ng-model="ngModel" name="{{name}}">
<label>Label</label>
</div>
I want the div to behave like a normal form element in every way, so I'm mostly interested in the class names that are attached to that element and not the class names that are attached to the inside the template.
I got this already working for the ng-valid/ng-invalid class and also the ng-model reflects the value inside the input. The problem I'm facing now is that ng-pristine/ng-dirty are only applied on the input and not on the div. How can I fix this?

Categories

Resources