I'm creating popovers with angular-strap using the $popover service like this:
this.popover = $popover(this.element, {
title: 'popover title',
content: 'popover content',
trigger: 'hover',
container: 'body',
html: true
});
This renders correctly:
However, when I try to destroy the popover, it doesn't remove it completely because when I hover over the element, it shows this:
I've tried separately both of the following lines of code which produce the same empty popover result:
this.popover.destroy();
this.popover.$scope.$destroy();
What am I doing wrong?
I tried and its working fine for me, you can refer the plnkr here: http://plnkr.co/edit/KyioKkQhxZDfUnQ0jn2E?p=preview
// HTML code
<!DOCTYPE html>
<html ng-app="mgcrea.ngStrapDocs">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/4.3.0/css/font-awesome.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/libs.min.css">
<link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/docs.min.css">
<link rel="stylesheet" href="style.css" />
<script src="//cdn.jsdelivr.net/angularjs/1.4.5/angular.min.js" data-semver="1.4.5"></script>
<script src="//cdn.jsdelivr.net/angularjs/1.4.5/angular-animate.min.js" data-semver="1.4.5"></script>
<script src="//cdn.jsdelivr.net/angularjs/1.4.5/angular-sanitize.min.js" data-semver="1.4.5"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.3.7"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.3.7"></script>
<script src="//mgcrea.github.io/angular-strap/docs/angular-strap.docs.tpl.js" data-semver="v2.3.7"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="bs-docs-section" ng-controller="PopoverDemoCtrl">
<div class="bs-example" style="padding-bottom: 24px;" append-source>
<!-- A popover can also be triggered programmatically using the $popover service -->
<button type="button" id="popover-as-service" class="btn btn-lg btn-primary" title="{{popover.title}}" ng-click="togglePopover()">Click to toggle popover
<br />
<small>(using $popover service)</small>
</button>
<div><a ng-click="hidePopover()">Click to close</a></div>
</div>
</div> </body>
</html>
// JS code
var app = angular.module('mgcrea.ngStrapDocs', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap']);
app.controller('MainCtrl', function($scope) {
});
'use strict';
angular.module('mgcrea.ngStrapDocs')
.config(function($popoverProvider) {
angular.extend($popoverProvider.defaults, {
html: true
});
})
.controller('PopoverDemoCtrl', function($scope, $popover) {
$scope.popover = {title: 'Title', content: 'Hello Popover<br />This is a multiline message!'};
var asAServiceOptions = {
title: $scope.popover.title,
content: $scope.popover.content,
trigger: 'manual'
}
var myPopover = $popover(angular.element(document.querySelector('#popover-as-service')), asAServiceOptions);
console.log(myPopover);
$scope.togglePopover = function() {
myPopover.$scope.$show();
};
$scope.hidePopover = function() {
myPopover.destroy();
};
});
Or may be if you are still facing some issue, you can create a plnkr and share.
Related
I'm very new to Angular.js.
I'm grabbing images from a MySQL database and printing them to the screen like this:
while ($row = mysqli_fetch_array($result)){
echo "<div id='img_div' ng-click='popup()'>";
On the echoed div, I have an ng-click. In app.js, this is currently what I have for the ng-click (purely for testing purposes:
$scope.popup = function() {
// assign a message to the $scope
$scope.message = 'Hello World!';
// use the $log service to output the message in a console
$log.log($scope.message);
};
What I'd actually like to have in that ng-click function is:
modal.style.display = "block";
I'd basically like to set the CSS of another element.
Will I need to apply ng-style in order to do this?
Using ng-style with a $scope variable you can control the display property (or any for that matter):
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.display = 'inline';
$scope.setDisplayValue = function(value){
$scope.display = value;
}
});
div#test {
background: red;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div id="test" ng-style="{'display' : display}">{{display}}</div>
<hr />
<button ng-click="setDisplayValue('inline')">Set Display to inline</button>
<button ng-click="setDisplayValue('block')">Set Display to block</button>
</body>
</html>
Plunker mirror: http://plnkr.co/edit/4vR4SEnz7iX81CWIrShw
Could you please explain why my ng-confirm-click doesn't work?
<div ng-controller="MainCtrl" ng-init="show=true;">
<p >Hello {{name}}!</p>
<button ng-show="show" confirmed-click="changes();show=false;" ng-confirm-click="Confirm change?">change</button>
</div>
I need to hide the button.
Here the example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-app = "plunker">
<div ng-controller="MainCtrl" ng-init="show=true;">
<p >Hello {{name}}!</p>
<button ng-show="show" confirmed-click="changes();show=false;" ng-confirm-click="Confirm change?">change</button>
</div>
</body>
</html>
Try this working code,
Inside html:
<div ng-confirm-click="Are you sure to delete this product ?" confirmed-click="deletePost(data.postId)"> <span class="glyphicon glyphicon-trash"></span></div>
In app.js file, put the below code(without any change):
app.directive('ngConfirmClick', [
function(){
return {
link: function (scope, element, attr) {
var msg = attr.ngConfirmClick || "Are you sure?";
var clickAction = attr.confirmedClick;
element.bind('click',function (event) {
if ( window.confirm(msg) ) {
scope.$eval(clickAction)
}
});
}
};
}])
Use scope.$apply instead of scope.$eval and remove unnecessary scope.$apply from controller.
From documentation:
This use of $eval: scope.$eval() seems to be deprecated in favor of scope.$apply to execute a function that uses and modifies the scope, and update the view later.
Plunker
in my main page i have a tabstrip which it's tab items loaded dynamically.but angularjs does not load related controller for tabitem.
my code is something like this:
var tabStripElement = $("#tabstrip").kendoTabStrip({
animation: {
open: {
effects: "fade"
}
},
dataTextField: 'text',
dataContentField: 'content',
dataImageUrlField: 'dataImageUrl',
dataUrlField: 'url',
dataContentUrlField: 'contentUrl',
});
tabStripElement.parent().attr("id", "tabstrip-parent");
var tabStrip = tabStripElement.data("kendoTabStrip");
angular.module('myApp', []).controller('MainController', ['$scope', function($scope){
$scope.openTab()
{
tabStrip.append({
text: 'Title',
contentUrl: '/tabItem.html',
encoded: false
});
}
}])
.controller('TabController', ['$scope', function($scope){
}])
MainPage:
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<link href="~/Content/kendo/2016.1/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2016.1/kendo.default.min.css" rel="stylesheet" />
</head>
<body ng-controller="MainController">
<div id="tabstrip" class="text-right">
</div>
<script src="~/Scripts/lib/jquery/jquery-1.12.0.js"></script>
<script src="~/Scripts/lib/angular/angular.js"></script>
<script src="~/Scripts/lib/angular/angular-resource.js"></script>
<script src="~/Scripts/lib/kendo/2016.1/kendo.all.min.js"></script>
<script src="~/Scripts/js/app.js"></script>
<script src="~/Scripts/js/controllers.js"></script>
</body>
</html>
and view for tab is something like this:
<div ng-controller="TabController">
<input type="text" />
</div>
This is my code
var app = angular.module('app', ['ngAnimate', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'name' },
{ field: 'gender' },
{ field: 'company', enableSorting: false }
]
};
$timeout(function () {
$http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}, 2000);
}])
.directive('gridLoading', function () {
return {
restrict: 'C',
require: '^uiGrid',
link: function ($scope, $elm, $attrs, uiGridCtrl) {
$scope.grid = uiGridCtrl.grid;
}
}
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link data-require="bootstrap-css#*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="font-awesome#*" data-semver="4.1.0" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div ng-controller="MainCtrl">
Click on a column header to sort by that column. (The third column has sorting disabled.)
<br />
<br />
<div ui-grid="gridOptions" class="grid">
<div class="well grid-loading" ng-show="grid.rows.length == 0">
<i class="fa fa-spin fa-spinner"></i>
<strong>Data Loading...</strong>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
In the above code i got loading symbol on ui-grid before data rendering on grid, but the loading symbol appear on down of ui-grid.so i want to display loading symbol inside on ui-grid before data rendering on grid.
This is my plunker http://plnkr.co/edit/6ED6fPdGGwLNb1Zqubls?p=preview
One quick fix that may do what you need is purely a CSS change.
I added top: 0px; left: 0px; to the styles for the loading progress container, and it seems to cover the grid as you wish.
Here's my plunker.
I am trying to move a block of text up or down when arrows are pressed. I am having troubles getting my directive to change its CSS values when the buttons are pressed.
Here is my HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
<script src="app.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="subtitle.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Move Text up or down</h1>
<subtitle class="sub" pos="position">This will move when buttons are pressed</subtitle>
<br>
Position={{position}}
<br>
<br>
<p style="color:red">Click buttons to move text up or down</p>
<i class="fa fa-chevron-up" ng-click="inc()"></i>
<i class="fa fa-chevron-down" ng-click="dec()"></i>
</body>
</html>
Here is my directive:
angular.module('mSystem')
.directive('subtitle', function () {
"use strict";
var
scope = {
pos: "="
},
restrict = 'AE',
link = function($scope, $element, $attrs){
$scope.$watch('pos', function () {
console.log("position is: "+$scope.pos);
$element.css('{top:'+$scope.pos+'px;position:relative;!important}');
$attrs.style="top:'+$scope.pos+'px;position:relative;!important'";
});
};
return {
scope: scope,
link: link,
restrict: restrict
};
});
and here is my app:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.position=20;
$scope.inc=function(){
$scope.position+=1;
}
$scope.dec=function(){
console.log('subtracted');
$scope.position-=1;
}
});
I have created an angular.js plunker here: http://plnkr.co/o99x2Z
The syntax for changing the CSS is a bit different. Try this:
$element.css('top', $scope.pos + 'px');
Updated plunker
You are passing a string to the $element.css(), use an Object instead:
$element.css({ top: $scope.pos+'px', position: 'relative;!important' });
Plunker