I have a single page application with angular.js. The other parts are working but I could not run the rollover.
This is my controller. I am going to use on this controller.
angular.module('foodDeliveryApp')
.controller('RestaurantListController', restaurantListController);
function restaurantListController($scope,$sce, DataService, $rootScope, $location, $timeout) {
$scope.htmlPopover = $sce.trustAsHtml('<b style="color: red">hover on me as well</b>');
$scope.hovered = function(hovering){
$timeout(function() {
console.log('update with timeout fired');
if(hovering.objHovered==true){
hovering.popoverOpened2=true;
}
}, 500);
}
}
The above part is popover function.
There are a lot function for the other functionality but is not important.
<span ng-init="popoverOpened1=false" ng-mouseover="popoverOpened1=true" ng-mouseleave="popoverOpened1=false">
<button class="btn btn-default" uib-popover-html="htmlPopover"
popover-trigger="none" popover-placement="bottom-left" popover-is-open="popoverOpened1" >
<span>hover me</span>
</button>
</span>
This is the HTML part in HTML which is controlling by the same controller.
Is anyone know how can I show a popover without jquery?
Related
I am using angular aside to create a modal window. In the modal window there is a form with a submit button and a close button.
If I fill out the form and submit it and then click the close button the form is being submitted again. If I dont fill out the form and just click the close button the modal window is being closed with out the form is being submitted.
Any idea on how to prevent the form submit when closing the window?
Here is my controller where i have the method to open the modal window:
mainApp2.controller("mainAppController", ["$scope", "$aside", "$document", function ($scope, $aside) {
var asideInstance;
$scope.openSidebar = function () {
asideInstance = $aside.open({
templateUrl: "/Apps/Modules/ModuleConfigForm/templates/moduleConfigformTemplate.html",
controller: "moduleConfigformController",
placement: "left",
size: "sm",
backdrop: true
});
}
}])
Here is my comtroller with the close logic
mainApp2.controller("moduleConfigformController",
function moduleConfigformController($scope, $http, moduleConfigformService, $uibModalInstance, $filter) {
$scope.close = function (e) {
$uibModalInstance.dismiss();
e.stopPropagation();
};
....
}
Here is my form:
<form name="configForm" ng-submit="submitConfigForm()">
<button ng-disabled: ng-disabled="configForm.$invalid" tabindex="100" class="btn btn-success pull-left" type="submit" ng-class="{'btn-primary':configForm.$valid}">Start</button>
<button class="btn btn-warning pull-right" ng-click="close()">Close window</button>
</form>
Be careful when using buttons without a type attribute, since browsers will consider them as the default submit button of a form.
Try adding type attribute to button as shown below to prevent the form submission
<button type="button" class="btn btn-warning pull-right" ng-click="close()">Close window</button>
I am currently using an angular directive to alert the user of unsaved changes if they try to close the tab or browser. Now, I want to add a condition to that directive where if it is a url change within the site, to trigger a custom modal. Is it possible to store the code for this modal in the directive template so that I don't have to copy it to the bottom of each view? Here is my directive so far:
.directive('confirmOnExit', function() {
return {
restrict: "E",
link: function($scope, elem, attrs) {
window.onbeforeunload = function(){
if ($scope.currentForm.$dirty) {
return "You have unsaved changes, are you sure you want to leave the page?";
}
}
$scope.$on('$stateChangeStart', function(event, next, current) {
if ($scope.currentForm.$dirty) {
$scope.showModal = true;
}
});
},
template: "<div id='myModal' class='modal-background' ng-show='showModal'>
<div class='modal-window'>
<div class='modal-text-container'>
<div class='modal-text'>You have unsaved changes. Do you still want to continue?</div>
</div>
<div class='btn-container btn-group'>
<button type='button' class='btn btn-teal' ng-click='yes()'>Yes</button>
<button type='button' class='btn btn-blue' ng-click='no()'>No</button>
</div>
</div>
</div>"
};
})
And the HTML:
<form name="currentForm" ng-model="currentForm" confirm-on-exit>
<input type="text" ng-model="input1" />
<input type="text" ng-model="input2" />
<input type="text" ng-model="input3" />
<input type="text" ng-model="input4" />
<input type="submit" ng-click="saveChanges()" />
</form>
I would suggest you to not store the code in the directive. There are multiple ways to achieve it and the here is the cleaner way of achieving this.
Define a global controller either in <html>, or <body> tag so that it's scope is available throughout your app and do the following in that global controller:
myApp.controller("GlobalController", function($scope) {
// Avoid scope inheritance problem
$scope.globalData = {}
$scope.showMyModal = function () {
$scope.globalData.showModal = true;
}
$scope.hideMyModal = function () {
$scope.globalData.showModal = false;
}
});
Now in your main HTML (like index.html), put the controller and that template:
<body data-ng-controller="GlobalController">
<!-- other content -->
<div id='myModal' class='modal-background' ng-show='globalData.showModal'>
<div class='modal-window'>
<div class='modal-text-container'>
<div class='modal-text'>You have unsaved changes. Do you still want to continue?</div>
</div>
<div class='btn-container btn-group'>
<button type='button' class='btn btn-teal' ng-click='yes()'>Yes</button>
<button type='button' class='btn btn-blue' ng-click='no()'>No</button>
</div>
</div>
</div>
</body>
And there is two problems with your directive. Modified directive looks like:
myApp.directive('confirmOnExit', function() {
return {
restrict: "A",
link: function ($scope, elem, attrs) {
window.onbeforeunload = function () {
if ($scope.currentForm.$dirty) {
return "You have unsaved changes, are you sure you want to leave the page?";
}
};
$scope.$on('$stateChangeStart', function (event, next, current) {
if ($scope.currentForm.$dirty) {
$scope.showMyModal();
event.preventDefault(); // this is required
}
});
}
}
});
The first problem was that you have to use restrict: 'A' since you are using the directive as attribute directive and you have to mention event.preventDefault(); otherwise your state navigation will not be prevented.
Now, we are calling that showMyModal method in the directive and that will be accessible since the directive's scope will inherit it's parent scope and so on.
The another way you could achieve the same using $on and $broadcast to pass the message.
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>
I've read Angular UI Bootstrap adding a close button and show hidden div on ng-click within ng-repeat. I'd like to use the solution from the latter article and apply it to the problem stated in the first article. In essence, I want to be able to close an Angular UI Bootstrap popover with ng-show or ng-click.
I have an example piece of code to illustrate this. This code just applies a CSS class to a particular element whenever it is clicked, and removes it when it is clicked again:
<div ng-class="{'gray-inset-border': style}">
<div ng-click="style=!style"></div>
</div>
Whenever an element containing a popover is clicked, a popover template is created. In the Chrome DOM inspector, the opening tag looks like this:
<div class="popover ng-isolate-scope right fade in"
tooltip-animation-class="fade" tooltip-classes=""
ng-class="{ in: isOpen() }" popover-template-popup="" title=""
content-exp="contentExp()" placement="right" popup-class="" animation="animation"
is-open="isOpen" origin-scope="origScope"
style="top: 317.5px; left: 541.8125px; display: block;">
Notice the ng-class="{in: isOpen()}". I am assuming that this controls whether the popover is open or not, and want to use the same ng-click method as in the example above, and apply it to a button within the popover. However, when I tried that, it didn't work. I also can't find the popover template anywhere in the ui-bootstrap-tpls.js code. As far as I know, popover creation is voodoo magic.
It's also frustrating that Angular UI Bootstrap doesn't have this functionality already. I've been trying to solve this problem off and on for over a week now, and every "solution" I have seen doesn't seem to work for me.
Am I understanding the ng-class="{in: isOpen()}" correctly? Where do I edit the popover template to add a close button?
This was solved by #ognus on a GitHub thread.
He stated:
I've found that using a simple custom directive worked best for my use case. I just want to be able to close the popover from within the popover template.
The directive exposes scope.toggle method that user custom trigger to open and close popover. I'm then using this method in the popover template.
There is a plnkr that I adapted to test my own issue. The solution involved creating a directive (of course).
HTML
<!DOCTYPE html>
<html ng-app="main">
<head>
<script data-require="angular.js#1.x" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script data-require="ui-bootstrap#0.13.0" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="popoverToggle.js"></script>
<script src="script.js"></script>
</head>
<body style="margin: 50px">
<!-- Show popover link -->
<a
href=""
popover-placement="bottom"
popover-trigger="open"
popover="Lorem ipsum dolor sit amet, consectetur."
popover-title="This is a title"
popover-toggle>
Show popover</a>
<div popover-placement="bottom" popover-trigger="open"
popover-template="'popover-template.html'" popover-toggle>Show Popover 2</div>
</body>
</html>
popoverToggle directive
angular.module('main')
.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;
});
};
return element.on('click', scope.toggle);
}
};
});
Popover template
<p>Are you sure you want to remove this item?</p>
<a href='' ng-click='remove(item)'>Yes</a>
<div ng-click='toggle()'>No</div>
app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
app.controller(
'dataCtrl', function() {
var self = this;
self.data = [
{name: "one", num: 23},
{name: "two", num: 87},
{name: "three", num: 283}
]
return self;
}
)
app.controller(
'myPopoverCtrl', ['$scope',
function($scope) {
// query popover
$scope.myPopover = {
isOpen: false,
templateUrl: 'myPopoverTemplate.html',
open: function open( value ) {
$scope.myPopover.isOpen = true;
$scope.myPopover.data = "(" + value.num + ")";
},
close: function close() {
$scope.myPopover.isOpen = false;
}
};
}
]);
<body ng-app="ui.bootstrap.demo" class='container'>
<div ng-controller='dataCtrl as dc' >
<li ng-repeat="d in dc.data">
{{d.name}}
<a ng-controller="myPopoverCtrl"
popover-template="myPopover.templateUrl"
popover-title="This is a popover"
popover-placement="right"
popover-is-open="myPopover.isOpen"
ng-click="myPopover.open(d)">
pop
</a>
</li>
</div>
<script
type="text/ng-template"
id="myPopoverTemplate.html">
<h2 ng-bind="myPopover.data"/>
<button
class="btn btn-success"
ng-click="myPopover.close()">Close me!</button>
</script>
</body>
Link to the working example
This is solution using another controller for the popover.
this controller opens and closes the popover.
you can also write the directive instead of controller.
Its works fine if data is in repeat.
I am trying to emulate a click event on a file input in AngularJS. I have seen working jQuery examples, but I don't want to use jQuery.
'use strict';
angular.module('MyApp', []).
controller('MyCtrl', function($scope) {
$scope.click = function() {
setTimeout(function() {
var element = angular.element(document.getElementById('input'));
element.triggerHandler('click');
$scope.clicked = true;
}, 0);
};
});
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<div ng-app="MyApp" ng-controller="MyCtrl">
<input id="input" type="file"/>
<button ng-click="click()">Click me!</button>
<div ng-if="clicked">Clicked</div>
</div>
Note: For some reason the button needs to be pressed twice in order to trigger the timeout function.
I am using setTimeout because of this post.
How do I programmatically click a file input with just AngularJS / vanilla JavaScript?
You can simply use
<button type="button" onclick="document.getElementById('input').click()">Click me!</button>
OR
$scope.click = function() {
setTimeout(function() {
document.getElementById('input').click()
$scope.clicked = true;
}, 0);
};
Here's how to trigger file of type 'file' or open select-file window when click on icon, button or span as you like ;)
css :
.attachImageForCommentsIcon{
padding-top: 14px;
padding-right: 6px;
outline:none;
cursor:pointer;
}
HTML :
<input id="myInput" type="file" style="visibility:hidden" ng-file-model=""/>
<i onclick="$('#myInput').click();" class="attachImageForCommentsIcon blue-2 right-position material-icons">image</i>
all credits goes for this answer :
https://stackoverflow.com/questions/8595389/programmatically-trigger-select-file-dialog-box
Thus, we customized file input tag using this way.