Html:
<button class="btn btn-default" ng-click="openCalendar($event)" ng-model="currentDate" ng-change="dateChanged(currentDate)" datepicker-popup
show-button-bar="false" is-open="calendarOpened">
<i class="fa fa-calendar"></i>
{{currentDate | date}}
</button>
Controller:
$scope.openCalendar = function ($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.calendarOpened = true;
};
The thing is, the $scope.openCalendar is called just fine, however the popup does not shown after the first time.
It's like $scope.calendarOpened = true didn't trigger the popup.
Any ideas? How can I debug or figure out why it is not working?
Use
is-open="$parent.calendarOpened"
Related
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);
}
I have the following directive
app.directive('replybox', function ($timeout, $window, $compile, $sce) {
var linkFn = function (scope, element, attrs) {
var exampleText= element.find('p');
var btn = element.find('button');
var windowSelection="";
scope.okOrCancel="None";
exampleText.bind("mouseup", function () {
scope.sel = window.getSelection().toString();
windowSelection=window.getSelection().getRangeAt(0);
if(scope.sel.length>0) {
scope.showModal = true;
scope.$apply();
}
});
btn.bind("click", function () {
if(scope.okOrCancel=='ok'){
range = windowSelection;
var replaceText = range.toString();
range.deleteContents();
var div = document.createElement("div");
div.innerHTML = '<poper>' + replaceText + '<button type="button" class="btn btn-danger btn-xs">×</button></poper>';
var frag = document.createDocumentFragment(), child;
while ((child = div.firstChild)) {
frag.appendChild(child);
}
$compile(frag)(scope);
range.insertNode(frag);
scope.showModal=false;
}
if(scope.okOrCancel=='cancel'){
scope.showModal=false;
}
scope.selection="None";
scope.okOrCancel='None';
});
};
return {
link: linkFn,
restrict: 'A',
scope: {
entities: '=',
selection:'='
},
template: `<ng-transclude></ng-transclude>
<div class="modal fade in" style="display: block;" role="dialog" ng-show="showModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
{{sel}}
</div>
<div class="radio">
<div ng-repeat="x in entities">
<div class="radio">
<label>
<input type="radio" name="choice" ng-model="$parent.selection" ng-value = "x">
{{x}}
</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="okOrCancel='ok'">
Ok
</button>
<button type="button" class="btn btn-primary" ng-click="okOrCancel='cancel'">
Cancel
</button>
</div>
</div>
</div>
</div>`,
transclude: true
};
});
So there is a modal in the template which contains an "Ok" and a "Cancel" button. There is an ng-click on these buttons which sets scope.okOrCancel to the appropriate value. btn binds to a button click and performs different actions depending on the state of scope.okOrCancel. When the "Ok" button is clicked everything works as expected. But the "Cancel" button requires two clicks in order for the modal to dissappear. I would think this would happen immediately within
if(scope.okOrCancel=='cancel'){
scope.showModal=false;
}
Can anyone tell me why the cancel button requires two clicks to close the modal?
Currently you have a mix of jQuery and angularjs for your ok and cancel click. Probably that is the reason to require two clicks to take effect.
If I were you, I would have write click like below:
Template:
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="okClick()"> Ok </button>
<button type="button" class="btn btn-primary" ng-click="cancelClick()"> Cancel </button>
</div>
In JS:
scope.okClick = function() {
range = windowSelection;
var replaceText = range.toString();
range.deleteContents();
var div = document.createElement("div");
div.innerHTML = '<poper>' + replaceText + '<button type="button" class="btn btn-danger btn-xs">×</button></poper>';
var frag = document.createDocumentFragment(), child;
while ((child = div.firstChild)) {
frag.appendChild(child);
}
$compile(frag)(scope);
range.insertNode(frag);
scope.showModal=false;
}
scope.cancelClick = function() {
scope.showModal=false;
}
scope.selection="None";
scope.okOrCancel='None';
I hope this helps you!
Cheers
Completely agree with varit05's answer. Most likely it's because you do not trigger digest cycle in the click event handler. But in any way, the point is: it's not very good idea to mix jquery and angular stuff, unless: a) you absolutely sure it's necessary; b) you understand very well what you're doing and why; otherwise it will lead to such an unexpected consequences.
Just another a small addition. Another problem is here:
$compile(frag)(scope);
range.insertNode(frag);
The correct approach would actually be to insert new nodes into real DOM and only then $compile() them. Otherwise, any directives with require: "^something" in the DOM being inserted will fail to compile because they would not be able to find necessary controllers in upper nodes until new nodes actually make it to the "main" DOM tree. Of course, if you absolutely sure you don't have that then you can leave it as is and it will work... But then the problem will just wait out there for its "finest hour".
I am trying to figure out how to close an accordion group from a button within the group.. seems like it should be easy.. but looks to be something with the scope being defined only within the group and not available in the controller? in the code snippet below the first button is how I would like to close the accordion group. The second button works.
Here is a simple plunkr on what I'm working on https://plnkr.co/edit/bghRaioszH3SZmiWxcoH?p=preview
<uib-accordion close-others="true" ng-controller="testCtrl">
<uib-accordion-group panel-class="panel-primary" is-open="status.isOpen">
<uib-accordion-heading>
Open: {{ status.isOpen }}
<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isOpen, 'glyphicon-chevron-right': !status.isOpen}"></i>
</uib-accordion-heading>
<button class="btn btn-warning" ng-click="close()">Cancel</button>
<button class="btn btn-warning" ng-click="status.isOpen=!status.isOpen">Cancel</button>
</uib-accordion-group>
</uib-accordion>
To access the status of an accordion group through your controller's scope, you need to do something like this:
Move ng-controller="testCtrl" to the <body> element
Define status explicitly in your controller's scope:
.controller('testCtrl', function($scope) {
$scope.status = {
isOpen: true
}
$scope.close = function(){
$scope.status.isOpen = false;
};
});
I am using the Angular-Bootstrap Dropdown. I want to prevent it from closing on click until the user closes it intentionally.
Default state is: The Dropdown closes when clicking somewhere in the Document.
I identified the relevant lines of code: (Line 12, dropdown.js)
this.open = function( dropdownScope ) {
if ( !openScope ) {
$document.bind('click', closeDropdown); // line to unbind
$document.bind('keydown', escapeKeyBind);
}
}
You can find the full code here: Link to Github
I don't want to change the original sources of angular-bootstrap to keep my project open for updates.
My question:
How can i unbind an event bound by a Directive to the document in an Angular Controller?
I solved this by adding the following to my drop down-menu. This prevents the drop down from closing unless you click on the tag that opens it
<ul class="dropdown-menu" ng-click="$event.stopPropagation()">
For those who are using Angular UI-Bootstrap 0.13.0 or later version, here is the cleaner way that states on the UI-Bootstrap documentation.
By default the dropdown will automatically close if any of its elements is clicked, you can change this behavior by setting the auto-close option as follows:
always - (Default) automatically closes the dropdown when any of its
elements is clicked.
outsideClick - closes the dropdown automatically only when the user
clicks any element outside the dropdown.
disabled - disables the auto close. You can then control the
open/close status of the dropdown manually, by using is-open. Please
notice that the dropdown will still close if the toggle is clicked,
the esc key is pressed or another dropdown is open. The dropdown will
no longer close on $locationChangeSuccess events.
Here is the link to the documentation:
https://angular-ui.github.io/bootstrap/#/dropdown
You can stop event from bubbling up in DOM Tree in angular 2 and above by adding event propagation.
Ex: (click)="$event.stopPropagation()"
This is another hack, but you could add a directive to stop the toggle event from propagating. For example something like this worked for my specific use case:
<div>
<div class="btn-group" dropdown is-open="status.isopen" ng-controller="DropDownCtrl">
<button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-click="goToPage('Action')">Action</li>
<li disable-auto-close>Don't Dismiss</li>
<li ng-click="goToPage('SomethingElse')">Something else here</li>
</ul>
</div>
Adding this directive to an element should disable the auto close behavior:
angular.module('plunker', ['ui.bootstrap'])
.controller('DropDownCtrl', ['$scope', '$location',
function($scope, $location) {
// Controller logic here
$scope.goToPage = function(page) {
console.log("Going to " + page + ". Dropdown should close");
$location.path(page);
};
}])
.directive('disableAutoClose', function() {
// directive for disabling the default
// close on 'click' behavior
return {
link: function($scope, $element) {
$element.on('click', function($event) {
console.log("Dropdown should not close");
$event.stopPropagation();
});
}
};
});
Plunker Example Here
This is a crude way of overriding it. You need to control the is-open attribute manually and hijack the on-toggle event, example:
<div class="btn-group" dropdown is-open="ctrl.isOpen" on-toggle="toggled(open)">
<button type="button" class="btn btn-primary dropdown-toggle">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
Controller:
$scope.toggled = function (open) {
$timeout(function () {
$scope.ctrl.isOpen = true;
});
};
I would ask for a property on the dropdownConfig constant (something like autoClose) for a permanent solution.
This is an even more crude way of overriding it based on Rob Jacobs answer except that it prevents the ugly flickering ulilcht commented on:
$scope.toggled = function (open) {
$scope.open = true;
var child = $scope.$$childHead;
while (child) {
if (child.focusToggleElement) {
child.isOpen = true;
break;
}
child = child.$$nextSibling;
}
};
You can also use this solution : https://gist.github.com/Xspirits/684beb66e2499c3ff0e5
Gives you a bit more of control over the dropdown, if that's ever needed.
You can decorate directives.
With this way you don't have to touch the original code and you can keep the original behaviour.
You can put a close button inside the dropdown
HTML
<div class="dropdown-menu keep-dropdown-open-on-click" role="menu">
<i class="icon-close close-dropdown-on-click"></i>
</div>
JS
angular.module('app').config(uiDropdownMenuDecorate);
uiDropdownMenuDecorate.$inject = ['$provide'];
function uiDropdownMenuDecorate($provide) {
$provide.decorator('dropdownMenuDirective', uiDropdownMenuDecorator);
uiDropdownMenuDecorator.$inject = ['$delegate'];
function uiDropdownMenuDecorator($delegate) {
var directive = $delegate[0];
var link = directive.link;
directive.compile = function () {
return function (scope, elem, attrs, ctrl) {
link.apply(this, [scope, elem, attrs, ctrl]);
elem.click(function (e) {
if (elem.hasClass('keep-dropdown-open-on-click') && !angular.element(e.target).hasClass('close-dropdown-on-click')) {
e.stopPropagation();
}
});
};
};
return $delegate;
}
}
Here is what the code looks like using the approved angular-bootstrap auto-close method. Notice the auto-close attribute goes on the top <div>.
<div class="btn-group" uib-dropdown auto-close="disabled">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<textarea class="form-control" ng-model="description" rows="4" placeholder="Description"></textarea>
</ul>
</div>
I'm failing to retrieve the actual value of my selected option (ng-model=filter) in my select html bloc.
Note that if I don't set $scope.filter then $scope.filter stay undefined even if I select an option in the dropdown list.
My html template, filters.html :
<div ng-if="!showFilterTemplatePlz">
<button class="btn btn-primary" ng-click="showFilterTemplate()" type="button">Add Filter</button>
</div>
<div ng-if="showFilterTemplatePlz" class="inline">
<button class="btn btn-primary" ng-click="closeFilters()" type="button">Close filters</button>
<label>filters</label>
<select ng-model="filter" ng-options="filter.name for filter in filterOptions" class="form-control">
</select>
<p>{{filter.name}}</p>
<button ng-click="addFilter()" id="addFilterButton" class="btn btn-primary btn-sm btn-default" type="button"><i class="fa fa-plus"></i> Add</button>
</div>
In my directive:
.directive('filters', ['retrieveStaticDatasService','usersService', function(datasService, usersService) {
return {
restrict: 'E',
scope: false,
controller: function ($scope) {
/* init */
$scope.filterOptions = [
{name: "languages"},
{name: "nationality"},
{name: "location"}
];
$scope.filter = $scope.filterOptions[0];
/* end init */
$scope.showFilterTemplate = function(){
$scope.showFilterTemplatePlz=true;
}
$scope.closeFilters = function(){
$scope.showFilterTemplatePlz=false;
}
$scope.addFilter = function(){
console.log("filter to add : " + $scope.filter.name);
}
},
templateUrl: '/partials/components/filters.html'
}
}])
Result :
I can see the actual value appears in my html but i will always show "languages" for$scope.filter.name in my console, whatever option I selected! I took a screenshot to show you : http://hpics.li/4a37ae3
Thanks for your help.
[Edit : I made some test and my model are setted and updated only if they are not inside the "<div ng-if="..."></div>"]. Is it not allowed to put a ng-if directly in the directive?
Answer : Angularjs ng-model doesn't work inside ng-if
I found the solution, the problem was that ng-if creates a child scope. So I changed filter to $parent.filter in
<select ng-model="$parent.filter" ng-options="option.name for option in filterOptions" class="form-control">
</select>
I think you are confusing it by having to objects named 'filter'. You might be overwriting the ng-options object rather than your controller one.
Try changing to
<select ng-model="filter" ng-options="option.name for option in filterOptions" class="form-control"></select>
<p>{{filter.name}}</p>
<button ng-click="addFilter()" id="addFilterButton" class="btn btn-primary btn-sm btn-default" type="button"><i class="fa fa-plus"></i> Add</button>