I am using Bootstrap with angular 2, My angular (click) is not working inside my popover content.
HTML:
<p id="myPopover-profile">Operator</p>
<div class="profile-option" id="profile-option">
<div class="user-name"> Jhone Doe</div>
<div class="line"> </div>
<div class="end-session" (click)="endSession()"> End Session </div>
<div class="logout"> Logout </div>
</div>
</div>
TS:
ngOnInit() {
$('#myPopover-profile').popover({
placement: 'bottom',
toggle: 'popover',
html: true,
content: function() {
return $('#profile-option').html();
}
});
}
endSession(){
console.log("test");
}
why dont you create a component for your popover and in the popover html you do something like <my-component></my-component> therefore you can use myComponent.ts file to have the logic you want.
Related
I'm using sweetalert2 modal in which I have a bunch of cards with a link tag and upon clicking the link tag a function updates a hidden input's value. the function does not works. but when I manually inject the JavaScript via console it begins to work. I have tried defining the function above the main code and below the main code but still no luck.
Here's the sweetalert code
$(a_gateway2).click(function() {
Swal.fire({
title: '<strong>Select Coin</strong>',
html:
`<div class="col-md-10 offset-md-1">
<div class="card shadow-new">
<div class="card-body">
<a class="coin_card card-block stretched-link text-decoration-none" data-coin="bitcoin" href="#">
<div class="row" >
<div class="col-4">
<img src="assets/img/bitcoin.svg" alt="Bitcoin">
</div>
<div class="col-8">
<span>Bitcoin</span>
</div>
</div>
</a>
</div>
</div>
</div>`,
showCancelButton: false,
showConfirmButton: false
})
});
and my function
$(document).ready(function(){
$("a.coin_card").click(function(){
var value=$(this).attr('data-coin');
$('#gateway-value').val( value );
return false;
});
});
HTML
<input type="hidden" value="" id="gateway-value">
I'm attempting to make a reusable self contained angular 1.5 component that acts as a wrapper for other page content. When a value is changed it will toggle the child content. The solution of hiding and showing content is not in question but how to make a reusable component that can handle injecting the children into the components template and not over write the template.
page.html
<div class="some page">
<my-cmp value="false">
<p>this static content is toggled by my-cmp</p>
<div>more stuff</div>
<ul>
<li>no limits</li>
</ul>
</my-cmp>
</div>
When value is changed the component should change the content on the page.
<div class="some page">
<my-cmp value="true">
<div>
<h1>Content is hidden</h1>
<button>Show content</button>
</div>
</my-cmp>
</div>
I have been reading the angular 1.5 docs and haven't found any example that does this. The problem i'm having is that the child content is over writing the content in my components template and i have no way of telling the component the exact spot to place the child content. The component should be able to switch between the two states freely.
my-cmp.html
<div class="my-cmp">
<div ng-if="showContent">
<!--child content should be inserted here by the component -->
<!-- how do i tell the my-cmp template i want child elements injected here? -->
<!-- this is the only part i'm missing -->
</div>
<div ng-if="!showContent">
<h1>Content is hidden</h1>
<button>Show content</button>
</div>
</div>
(function() {
angular
.module('app.my-component')
.component('myCmp', {
transclude: true,
bindings: {
showContent: '='
},
templateUrl: 'my-cmp.html',
controller: 'MyCmpController'
});
})();
(function() {
angular
.module('app.my-component')
.controller('MyCmpController', MyCmpController);
/*#ngInject*/
function MyCmpController($scope) {
$scope.showHiddenContent = showHiddenContent;
function showHiddenContent() {
$scope.showContent = !$scope.showContent;
}
}
})();
In HTML:
<div class="some-page">
<my-cmp show-content="isHidden">
<p>this static content is toggled by my-cmp</p>
<div>more stuff</div>
<ul>
<li>no limits</li>
</ul>
</my-cmp>
</div>
my-cmp.html
<div class="my-cmp">
<div class="content" ng-if="showContent" ng-transclude> <!-- ng-show="showContent" -->
<!-- content is added by children passed in -->
</div>
<div ng-if="!showContent"> <!-- ng-hide="!showContent" -->
<h1>Content is hidden</h1>
<button type="button" ng-click="showHiddenContent()">Show content</button>
</div>
</div>
I managed to find some old documents showing how to do this. the transclude: true, in the component is needed.
my-cmp.js
(function() {
angular.module("app").component("my-cmp", {
templateUrl: "views/tmpl/components/my-cmp.html",
controller: [myCmp],
restrict: 'E',
transclude: true,
binding: {
show: '<',
}
});
function myCmp() {...}
})();
my-cmp.html
<div class="my-cmp">
<div class="content" ng-if="showContent" ng-transclude>
<!-- content is added by children passed in -->
</div>
<div ng-if="!hideContent">
<h1>Content is hidden</h1>
<button>Show content</button>
</div>
</div>
adding ng-transclude as an attribute to the element that is the target, will tell angular to inject the child DOM elements in this spot and not over write your template.
How can I show a Logout Button when I click on my icon?
home.html:
<div class="icon-bar">
<div class="logout">
<img src="/Login/images/login.png" ng-model="logout">
<div class="check-element animate-hide" ng-show="logout">
<button>Logout</button>
</div>
<div class="check-element animate-hide" ng-hide="logout">
</div>
</div>
<div>
When i click on the icon, I want the logout button to appear like a "dropdown"
I want to put the logic in a controller.
Sorry, I know it's an easy task, but I am totally new in angular js :/
You can add ng-click on the image. This will call a function that will toggle the variable logout.
You can also put logout = !logout directly inside the ng-click directive
The dropdown effect has to be done with css/js. This has nothing to do with AngularJS
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.logout = false;
$scope.toggleLogout = function() {
$scope.logout = !$scope.logout;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="logout" ng-app="myApp" ng-controller="myCtrl">
<img src="/Login/images/login.png" ng-click="toggleLogout()">
<div class="check-element animate-hide" ng-show="logout">
<button>Logout</button>
</div>
<div class="check-element animate-hide" ng-hide="logout">
</div>
</div>
Here I use ng-click: when you will click on your image, it will change the value of logout (true -> false ; false -> true). Your ng-show / ng-hide will work as you expect.
<div class="logout">
<img src="/Login/images/login.png" ng-click="logout = !logout">
<div class="check-element animate-hide" ng-show="logout">
<button>Logout</button>
</div>
<div class="check-element animate-hide" ng-hide="logout">
logout is {{logout}}
</div>
</div>
Try is on JSFiddle.
So, I had a working function in jQuery but then I decided to use Angular for my application. Just can't find the way so it adds the CSS to only one child element.
Jquery code that was working
$('.list-div').on('mouseenter', function(){
$(this).find('.client-jar').css('opacity','1');
}).on('mouseleave', function() {
$(this).find('.client-jar').css('opacity','0');
});
Current html
<ul>
<li ng-repeat="one in ones | orderBy:'-date'">
<div class="list-div">
<div class="row jar-div first-jar-div" ng-mouseover="showButton()" ng-mouseleave="hideButton()">
<div class="col-xs-7 description-div">
<p class="version">{{ one.version }}</p>
<p class="date">{{ one.date }}</p>
</div>
<div class="col-xs-5 buttons-div">
<div class="list-button client-jar">
<a class="list-link" data-toggle="modal" data-target="#myModal">create server</a>
</div>
<div class="list-button server-jar">
<a class="list-link">Server jar</a>
</div>
</div>
</div>
</div>
</li>
</ul>
And Current Angular JS
$scope.showButton = function(){
angular.element('.list-div').find('.client-jar').css('opacity','1');
};
$scope.hideButton = function(){
angular.element('.list-div').find('.client-jar').css('opacity','0');
};
I would use:
https://docs.angularjs.org/api/ng/directive/ngMouseenter
<button ng-mouseenter="hoverState = true">mouse in mouse out</button>
Then use with:
https://docs.angularjs.org/api/ng/directive/ngMouseleave
<button ng-mouseenter="hoverState = true" ng-mouseleave="hoverState = false">mouse in mouse out</button>
At this point you have a hover over and off flag. You can now pick this flag up with ng-class to set and unset a CSS class which contains your opacity stuff, and any future CSS animations etc etc:
https://docs.angularjs.org/api/ng/directive/ngClass
<button ng-mouseenter="hoverState = true" ng-mouseleave="hoverState = false" ng-class="{'opacity-class':hoverState}">mouse in mouse out</button>
No jQuery required, AngularJS is just a totally different way of going about things.
<style>
.opacity-class .client-jar{
opacity:0;
}
</style>
<ul>
<li ng-repeat="one in ones | orderBy:'-date'">
<div class="list-div">
<div class="row jar-div first-jar-div" ng-mouseenter="hoverState = true" ng-mouseleave="hoverState = false" ng-class="{'opacity-class':hoverState}">
<div class="col-xs-7 description-div">
<p class="version">{{ one.version }}</p>
<p class="date">{{ one.date }}</p>
</div>
<div class="col-xs-5 buttons-div">
<div class="list-button client-jar">
<a class="list-link" data-toggle="modal" data-target="#myModal">create server</a>
</div>
<div class="list-button server-jar">
<a class="list-link">Server jar</a>
</div>
</div>
</div>
</div>
</li>
</ul>
angular.module('App').directive('listFade', function() {
return function(scope, element) {
element.bind('mouseover', function(children) {
// YOUR ANIMATION CODE HERE
});
element.bind('mouseout', function(children) {
// YOUR ANIMATION OUT CODE HERE
});
}
})
then just add the directive to your ng-repeat markup, list-fade=""
you don't need children but its a easy way to call the children of each element. This should help you out. Then get rid of that ng-mouseover showButton();
Updating your code to use inline CSS, would be like this.
var element = document.querySelector('.list-div .client-jar');
$scope.showButton = function(){
angular.element(element).css('opacity','1');
};
$scope.hideButton = function(){
angular.element(element).css('opacity','0');
};
As in AngularJS .element documentation, it's said that you need to pass a element.
You can also use ng-class, creating a class for opacity:
<div class="client-jar" ng-class="{class: expression}"></div>
https://docs.angularjs.org/api/ng/directive/ngClass
Or use ng-show and ng-hide for display control:
<div class="client-jar" ng-show="expression"></div>
https://docs.angularjs.org/api/ng/directive/ngShow
You could even use ng-style for inline css:
<div class="client-jar" ng-style="{'opacity': '1'}"></div>
https://docs.angularjs.org/api/ng/directive/ngStyle
I'm having some trouble making a working show div and I just can't get it.
So I have the following:
function GetCaptcha() {
$(".panel-captcha").fadeIn(500);
}
Get
<div class="panel-captcha">
TEXT
</div>
The div has the display:none tag.
It works very well, but I have one problem. I need to have many divs inside the same page ( not the same, it may change from database ). If I have 3 or 4 panels, when I click the button it will show them all instead only the div where I have the link to show.
Anyone can help me? Thanks.
Complete HTML file...
<div class="col-md-4">
<div class="panel panel-blue" data-widget='{"draggable": "false"}'>
<div class="panel-heading">
<h2>TEXT</h2>
<div class="panel-ctrls">
<i class="ti ti-eye"></i>
<!-- BUTTON TO SHOW CAPTCHA -->
</div>
</div>
<div class="panel-body">
<small>Other Text...</small>
</div>
<div class="panel-footer">
<div class="tabular">
<div class="tabular-row tabular-row">
<div class="tabular-cell">
<span class="status-total"><strong>More Text...</strong></span>
</div>
<div class="tabular-cell">
<span class="status-pending">Other Text...</span>
</div>
</div>
</div>
</div>
<div class="panel-captcha">
<!-- HIDDEN DIV -->
<div class="tabular-cell">
HIDDEN TEXT
</div>
</div>
<!-- END HIDDEN DIV -->
</div>
</div>
You can pass the reference of element to click handler, then use .next()
Script
function GetCaptcha(elem) {
$(elem).next(".panel-captcha").fadeIn(500);
}
.panel-captcha {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Get
<div class="panel-captcha">
TEXT
</div>
As you are using jQuery bind event using it.
HTML
Get
<div class="panel-captcha">
TEXT
</div>
Script
$(function() {
$('.captcha').on('click', function () {
$(this).next(".panel-captcha").fadeIn(500);
});
});
EDIT
As per updated HTML use
function GetCaptcha(elem) {
$(elem).closest('.panel').find(".panel-captcha").fadeIn(500);
}