I have one div, initially it is hidden. But on click of the button i am showing it using angular ng-show directive. After showing for 2 seconds i want to hide it. How to do it using angular or css anyone is ok.
HTML code
<div class="subcontent tinyUrlContainer">
<span class="slabel col-md-2">WAP Link :</span>
<div class="input-group col-md-6">
<input type="text" ng-model="wapLink" class="form-control">
<span class="input-group-btn" my-Tooltip>
<button type="button" class="btn btn-default" clipboard supported="supported" text="wapLink" ng-click="clipboard=true" on-error="fail(err)"><img class="clippy" src="./images/surveys/tinyUrl.png" width="13" alt="Copy to clipboard" data-pin-nopin="true"></button>
</span>
</div>
</div>
<span class="copied col-md-offset-6 col-lg-offset-5 col-md-1" ng-show="clipboard">Copied!</span>
on click of the button am setting the clipboard as true and in .copied class element ng-show="clipboard" am setting.
On HTML
ng-show=someCondition()
On your controller
var show = false;
function someCondition(){
return show;
}
function onClick(){
show = true;
$timeout(function(){
show= false
}, 2000);
}
$scope.theClickFunction(){
$scope.theShowFlag = true;
$timeout(function(){
$scope.theShowFlag = false;
}, 2000);
}
Related
I have a problem with a button which contacts server on click. If you do a double click (or any number of clicks for that matter) you will call the server that number of times.
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'ADMIN.CONTENT.DELIVERIES.BODY.CLOSE' | translate }}</button>
<a class="btn btn-danger" ng-click="vm.markDelivered()" ng-dblclick="return" ng-disabled="flag">{{ 'MANAGER.CONTENT.DELIVERIES.BODY.DELETE_PANEL.CONFIRM' | translate }}</a>
</div>
I have tried with ng-disabled but for some reason it doesn't work, as it is saying that that element is not allowed there. I tried changing a to button, but that seems the same. ng-dblclick="return" does nothing also.
Even I had the same issue,And solved using this approach.
<div class="col-sm-4 form-group pull-right">
<input type="submit" name="Submit" class="btn btn-primary"
value="Submit" data-ng-disabled="myForm.$invalid"
ng-click="myForm.$invalid=true;vm.markDelivered()" />
</div>
So on first click myForm.$invalid=true will be set and button will be disabled. SO you will not have multiple calls to your server side code.
So with Bootstrap buttons you won't be able to use ng-disabled. You would have to do it this way:
<div class="btn btn-default" ng-class="{'disabled': idDisabled}" ng-click="doSomething()">I'm a button!</div>
where you are setting the class disabled on the button. But this does not disable the action itself. So when the button is pressed you would need to check that isDisabled variable and if it is true just return and don't do the intended action.
So for example:
doSomething() {
if (isDisabled) {
return
} else {
// do your server call
// when call is finished set isDisabled = false
}
}
I see a couple of issues here.
First, change the anchor tag to a button.
Second, you seem to be using 'controller as' syntax. So, you are probably setting your flag in the vm. But, in your html, you are looking for the flag in the $scope. Change ng-disabled="flag" to ng-disabled="vm.flag"
Your final button line would look like this:
<button class="btn btn-danger" ng-click="vm.markDelivered()" ng-dblclick="return" ng-disabled="vm.flag">{{ 'MANAGER.CONTENT.DELIVERIES.BODY.DELETE_PANEL.CONFIRM' | translate }}</button>
Adding a working plunker here demonstrating ng-disabled
What about using a simple behaviour directive?
function oneTimeCallDirective($timeout) {
var httpCallMock = (cb = () => 'ok') => $timeout(cb, 5000);
return function oneTimeCallPostLink(iScope, iElement) {
let busy = false;
return iElement
.on('click dblclick', function(event) {
if(busy) {
return event.preventDefault();
}
busy = true;
console.info('Well, Calling.');
return httpCallMock()
.then(() => {
console.log('You Can Start Calling Again');
})
.finally(() => {
busy = false;
})
;
})
;
};
}
angular
.module('test', [])
.directive('oneTimeCall', oneTimeCallDirective)
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="test">
<button one-time-call>Click Here</button>
</section>
Instead of adding uib-tooltip="tooltip text" to the element I want to add only a tooltip attribute.
In the tooltip directive I want to do something along the lines of "on mouseenter if a condition is met then show my full text content in uib-tooltip"
You can use tooltip-enable.
JS
.controller("ctrl", function($scope){
$scope.isToolTipEnabled = false;
$scope.toggleToolTip = function(){
$scope.isToolTipEnabled = !$scope.isToolTipEnabled;
}
});
HTML
<div ng-controller="ctrl">
<div class="label label-info" class="btn btn-default"
tooltip-enable="isToolTipEnabled"
uib-tooltip="This is a conditional tooltip">Conditional Tooltip here</div>
<button type="button" class="btn btn-default" ng-click="toggleToolTip()" ng-class="{'btn-success': isToolTipEnabled, 'btn-danger': !isToolTipEnabled}">Tooltip is {{isToolTipEnabled ? 'enabled' : 'disabled'}}</button>
</div>
I have a set of directives that share a scope
Update:
The code is available as a plunk here http://plnkr.co/edit/JZ77bsZgGrw6N4K718Is?p=preview
todo-item:
app.directive("todoItem",function(DeleteTodo,$log){
var dirDefObj = {
restrict:'E',
templateUrl:'app/templates/todo.html',
scope:{
todo:'=value'
},
controller:function($scope){},
replace:true
};
return dirDefObj;
});
template:
<div class="ui card">
<todo-formui ng-show="todo.editMode"></todo-formui>
<todo-cardui ng-show="!todo.editMode"></todo-cardui>
</div>
There are two directives that inherit the scope of this directive:
todo-cardui
app.directive('todoCardui',function(){
var dirDefObj = {
restrict:'E',
templateUrl:'app/templates/display-todo.html',
scope:false,
replace:true,
controller:function($scope)
{
$scope.clickDone = function clickDone(){
//two tasks (1)toggle the done value on the todo (2) toggle the btnText on the todo
$scope.todo.done = !$scope.todo.done;
$scope.todo.btnText = $scope.todo.done?'Reinstate':'Done';
};
$scope.remove = function remove()
{
DeleteTodo.delete($scope.todo);
$scope.$emit('todo:deleted',$scope.todo);
};
$scope.edit = function edit(value)
{
$scope.todo.editMode = true;
$scope.savedState = angular.extend({},$scope.todo);
};
}
};
return dirDefObj;
});
template:
<div>
<div class="content">
<i class="right floated blue pencil icon" ng-click="edit()"></i>
<header class="ui medium header">
<span ng-class="{'done-todo':todo.done,'normal-todo':!todo.done}">{{todo.task}}</span>
</header>
<div class="description">
<p>{{todo.description}}</p>
</div>
</div>
<div class="extra content">
<button class="ui small green toggle button floated left" ng-click="clickDone()">{{todo.btnText}}</button>
<button class="ui small red button floated left" ng-click="remove()">Delete</button>
</div>
</div>
todo-formui:
app.directive("todoFormui",function(EditService){
var dirDefObj = {
restrict:'E',
templateUrl:'app/templates/edit-todo.html',
scope:false,
controller:function($scope){
$scope.display = function display(){
console.log("Inside the edit to preview function");
$scope.editMode = false;
};
$scope.save = function(){
EditService.edit($scope.todo);
};
$scope.discard = function(){
$scope.todo={
task:'',
dscription:'',
btnText:''
};
$scope.todo = $scope.savedState;
};
},
replace:true
};
return dirDefObj;
});
template:
<div ng-class="{description:show_modal,content:!show_modal}">
<i class="right floated blue unhide icon" ng-click="display()"></i>
<form class="ui small form">
<div class="field">
<label>Task</label>
<input type="text" name="task" placeholder="What do you want to do?"ng-model="todo.task">
</div>
<div class="field">
<label>Description</label>
<textarea ng-model="todo.description"></textarea>
</div>
<div class="two fields">
<button class="ui red button floated right">Discard</button>
<button class="ui submit green button floated right" ng-click="save()">Save</button>
</div>
</form>
When executing the code,I found that the display function in todo-formui would not execute,no matter where I put it or what I tried to do.The save function in the same scope runs with no problems.
In your preview function(as mentioned in plunker), you have to update the scope as
$scope.todo.editMode = false;
instead of
$scope.editMode = false;
then the preview will be avaliable
Hope this helps
It's because the icon is under another html element and the click event isn't triggered. Add a clear after the "preview" icon (which is floated) to push the form where it should be. Use some DOM inspector and you will soon realize the problem.
I am using Angular Ui Datepicker in my app. Strange thing is happening, may be a bug. The date picker is not functioning (not showing) if there is a child element inside the datepicker element.
In my example below if I put span (or any other) tag inside a tag - where I have put my datepicker - it will not work, but if there is not child element inside of it , it works as expected.
Is this a bug or I am missing something ?
Edit : Created A Fiddle Also
var app = angular.module('app', ['ui.bootstrap']);
app.controller("TestController", function($scope) {
$scope.isOpen = false;
$scope.isOpen2 = false;
$scope.isOpen3 = false;
$scope.popupOptions = {};
});
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div ng-app="app">
This will show Date picker
<br />
<a href="javascript://" ng-model="deadline2" is-open="isOpen2" ng-click="isOpen2 = !isOpen2" datepicker-popup="popupOptions"> <span> This will not </span>
</a>
<br />
<a href="javascript://"> <span ng-model="deadline2" is-open="isOpen3" datepicker-popup="popupOptions" ng-click="isOpen3 = !isOpen3"> This will also show </span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
Looks like the datepicker can only be set on the innermost elements. It might be that way by design as I found no examples where datepicker is set on a parent element.
Also, you code works if the datepicker is set on span(or any other child element).
<a href="javascript://">
<span ng-model="deadline" is-open="isOpen" ng-click="isOpen = !isOpen" datepicker-popup="popupOptions">datepicker set on span inside anchor</span>
</a>
Plnkr
Here is an example to use the directive with a bootstrap input, displaying a calendar button
HTML
<p class="input-group">
<input type="text" class="form-control" datetime-picker="dd MMM yyyy HH:mm" ng-model="myDate" is-open="isOpen" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openCalendar($event, prop)"><i class="fa fa-calendar"></i></button>
</span>
</p>
JAVASCRIPT
app.controller('MyController', function() {
var that = this;
this.isOpen = false;
this.openCalendar = function(e) {
e.preventDefault();
e.stopPropagation();
that.isOpen = true;
};
});
See demo : https://github.com/Gillardo/bootstrap-ui-datetime-picker
I am using ngSwitch directive to switch the view to Edit the div content. HTML is as follows -
<div ng-switch="isEditing" ng-controller="descController">
<div ng-switch-when="true">
<textarea name="Name" rows="8" class="form-control" ng-model="desc"></textarea>
<button class="btn btn-primary" ng-click="saveEdit($parent)">Save</button>
<button class="btn btn-warning" ng-click="cancelEdit($parent);">Cancel</button>
</div>
<div ng-switch-default>
<p class="lead" >{{desc}}</p>
<p><button class="btn btn-mini btn-danger" ng-click="$parent.isEditing = true;">Edit</button></p>
</div>
</div>
The controller code is as follows
home.controller("descController", function($scope, Desc){
(function getAboutMe(){
Desc.getAboutMe().success(function(about){
$scope.desc = about[0].description;
$scope.actualText = about[0].description;
$scope.saveEdit = function($parent){
//$scope.desc = $scope.desc;
$parent.isEditing = false;
}
$scope.cancelEdit = function($parent){
$scope.desc = $scope.actualText;
$parent.isEditing = false;
};
}).error(function(err){
alert(err);
});
})();
});
What I am trying to do is, when the cancel button is pressed I want the original text to be visible on the div and when the save button is clicked I want the new text to be visible on the div. How can i achieve this? I am new to Angular.
Do you need something like this?
$scope.saveEdit = function($parent){
$scope.actualText = $scope.desc; //update actualText before switching to view mode
$parent.isEditing = false;
}
$scope.cancelEdit = function($parent){
$scope.desc = $scope.actualText; //restore des
$parent.isEditing = false;
};
The main problem is ng-switch creates a new scope. Therefore you need to bind to the parent scope in your textarea using $parent:
<textarea name="Name" rows="8" class="form-control" ng-model="$parent.desc"></textarea>
DEMO