I'm having truble setting the data-background attribute. Any idea why this is not working?
angular.module('app',[]).controller('SlidesController',['$scope','$timeout', function($scope,$timeout){
$scope.slides = [
{ title:"I'm white - but should have some color", background:"#22BB44"},
{ title:"...no color here? Why??", background:"#99BB44"} ];
$timeout(function(){
Reveal.initialize({
autoSlide: 1500,
loop:true
});
}, 1000);
}]);
.slides section {
font-size: 50px;
}
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="https://rawgit.com/hakimel/reveal.js/master/js/reveal.js"></script>
<link rel="stylesheet" href="https://rawgit.com/hakimel/reveal.js/master/css/reveal.css"></style>
<body ng-app="app" ng-controller="SlidesController">
<div class="reveal">
<div class="slides">
<!-- this works -->
<section data-background="#0000aa">
I'm blue
</section>
<!-- this works, except for the background -->
<section data-background="{s.background}" ng-repeat="s in slides">{{s.title}}</section>
</div>
</div>
</body>
Simple fix, just needed to create a directive for the attribute
.directive('slidebackground', function(){
return {
link: function(scope, element, attrs) {
attrs.$set('data-background', attrs.slidebackground);
}
});
Related
var myApp = angular.module('myApp',['angular-virtual-keyboard']);
myApp.controller('MyCtrl',MyCtrl);
function MyCtrl($scope) {
document.getElementsByTagName('input')[0].focus();
}
<link href="https://rawgit.com/the-darc/angular-virtual-keyboard/master/release/angular-virtual-keyboard.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script src="https://rawgit.com/the-darc/angular-virtual-keyboard/master/release/angular-virtual-keyboard.js"></script>
<body ng-app='myApp'>
<div ng-controller="MyCtrl">
<input type='text' ng-model="textValue" ng-virtual-keyboard/>
</div>
</body>
If I click on input then virtual keyboard is opening. But how can I open the keyboard without click. I tried using input.focus() that didn't work.
Just find a working fiddle Here with an directive auto focus
var myApp = angular.module('myApp',['angular-virtual-keyboard']);
myApp.controller('MyCtrl',function($scope) {
});
myApp.directive('autoFocus', function($timeout) {
return {
restrict: 'AC',
link: function(_scope, _element) {
$timeout(function(){
_element[0].focus();
}, 0);
}
};
});
<link href="https://rawgit.com/the-darc/angular-virtual-keyboard/master/release/angular-virtual-keyboard.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script src="https://rawgit.com/the-darc/angular-virtual-keyboard/master/release/angular-virtual-keyboard.js"></script>
<body ng-app='myApp'>
<div ng-controller="MyCtrl">
<input type='text' ng-model="textValue" auto-focus ng-virtual-keyboard/>
</div>
</body>
You are doing change outside angularJS framework, so you need to apply it by $scope.$apply();
var myApp = angular.module('myApp',['angular-virtual-keyboard']);
myApp.controller('MyCtrl',MyCtrl);
function MyCtrl($scope) {
document.getElementsByTagName('input')[0].focus();
$scope.$apply();
}
If I have an element which has ng-class attribute with some binding and I call addClass on that element will these two work fine together?
I mean that will class attribute of that element contain both classes (one added via addClass call and another from ng-class)
For example:
Here is the element:
<div class="ui-grid-cell-contents"
ng-class="[col.colIndex(), { 'position-relative': col.grouping && row.groupHeader }]"
ng-bind="COL_FIELD CUSTOM_FILTERS"
data-directive-that-calls-add-class>
Here is the directive that calls addClass (its link function):
link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => {
element.addClass("disable-safari-tooltip");
Here is an example where both the classes will be added one through ng-class and other through a directive.
The ng-class makes background yellow and directive makes text green
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
.yellow{
background-color: yellow
}
.red{
color: green
}
</style>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div red ng-class=" { 'yellow': yellow}" >Test</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.yellow = true;
})
app.directive('red', function () {
return {
restrict: 'A',
link: function ($scope, $element, $attr, $timeout) {
$element.addClass("red");
}
};
});
</script>
</body>
</html>
But, if the same css property needs to be changed, then the last added will take more priority, for example, check the class is changed after 2 seconds through a directive
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
.yellow{
background-color: yellow
}
.red{
color: green
}
.blue{
background-color: blue
}
</style>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div red ng-class=" { 'yellow': yellow}" >Test</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.yellow = true;
})
app.directive('red', function ($timeout) {
return {
restrict: 'A',
link: function ($scope, $element, $attr) {
$element.addClass("red");
$timeout(function () {
$element.addClass("blue");
}, 2000);
}
};
});
</script>
</body>
</html>
Here is a demo URL
I hope you can help me out or give me a hint to solve my problem.
I am making an app using angularjs and material design lite (css and js).
My problem is that the material design js file doesn't take affect on the partials once the state changes and basically I lost all the functionality that material design library provides me.
this is my code so far
index.html
<!doctype html>
<html ng-app="app">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Appy2go</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<!-- Material Design Lite -->
<script src="dist/js/material.min.js"></script>
<link rel="stylesheet" href="dist/css/material.pink-blue.min.css">
<!-- <script src="https://code.getmdl.io/1.2.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.indigo-pink.min.css"> -->
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script src="https://cdn.rawgit.com/auth0/angular-storage/master/dist/angular-storage.js"></script>
<script src="https://cdn.rawgit.com/auth0/angular-jwt/master/dist/angular-jwt.js"></script>
<script src="app.js"></script>
<script src="modules/home/home.js"></script>
<script src="modules/signin/signin.js"></script>
<link rel="stylesheet" href="dist/css/style.css">
</head>
<body>
<div id="app-wrapper" ui-view></div>
<!--THIS BUTTON WORKS AS SUPPOSED TO BE-->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>
</body>
</html>
app.js
angular.module('app',[
'ui.router',
'app.home',
'app.signin'
])
.config(function($urlRouterProvider){
$urlRouterProvider.otherwise('/');
})
.controller('AppController',function($scope){
console.log("ready");
})
home module
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout-icon"></div> <!-- IT SHOULD DISPLAY AN ICON ON SMALL DEVICES -->
<div class="mdl-layout__header-row">
<span class="mdl-layout__title">App Name</span>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout__title">App Name</span>
<nav class="mdl-navigation">
link 1
link 2
link 3
</nav>
</div>
<main class="mdl-layout__content">
<div>Content</div>
<!-- Colored FAB button with ripple -->
<!-- Accent-colored raised button with ripple -->
<!-- THIS BUTTON DOESN'T WORK AS SUPPOSED TO BE -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>
</main>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__right-section">
<div class="mdl-logo">Appy2go</div>
<ul class="mdl-mini-footer__link-list">
<li>Help</li>
<li>Privacy & Terms</li>
</ul>
</div>
</footer>
</div>
home.js
angular.module('app.home',[
'ui.router'
])
.config(function($stateProvider){
$stateProvider.state('home',{
url:'/',
controller: 'HomeController',
templateUrl: 'modules/home/home.html',
})
})
.controller('HomeController',function($scope,$http){
console.log("Ready");
})
Angular has to know when to look for changes in the variables. If you have non-angular code changing things then you have to tell angular to rerun the digest cycle.
Here's an example where I wrapped the jQuery Dialog function in Angular. I'm having to manually tell Angular to WATCH and APPLY.
app.directive("dialog", function() {
return {
restrict: 'A',
scope: {
dialog:"=",
},
controller: function($scope) {
$scope.$watch("dialog", function(){
if($scope.dialog){
$scope.open();
}else{
$scope.close();
}
});
},
link: {
pre: function(scope, element, attributes) {
scope.open = function() {
element.dialog({
height: attributes.height,
width: attributes.width
});
};
scope.close = function() {
element.dialog("close");
};
},
post: function(scope, element, attributes) {
scope.open();
element.on("dialogclose", function(){
if(scope.dialog){
scope.dialog = false;
scope.$apply();
}
});
}
},
};
});
Rest of the code is here.
https://plnkr.co/edit/myBzYyL2BHOP8CtRpqrr?p=info
Your routing code should be in the first module which is the main module. I feel that's where your problem is, I am not on a PC right now to be able to replicate your code and test. But change that first.
I try to implement a tooltip with angularjs template inside. For this, I use "uib-tooltip-html" and I add an attribute on the element to compile the template. But it doesn't work.
Here is the code
Here is the plunker
http://plnkr.co/edit/y1TvogsFFBoBVra3gO3F?p=preview
<html>
<head lang="en">
<meta charset="UTF-8"/>
<title>uib-tooltip-html test</title>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-sanitize.min.js"></script>
<script>
var app = angular.module("test", ['ngSanitize','ui.bootstrap']).config(function($sceProvider) {
$sceProvider.enabled(false);
});
app.controller("testController", function($scope, $http, $interval, $sce) {
$scope.text = $sce.trustAsHtml('<table><tr ng-repeat="x in [1,2,3]"><td>{{ x }}</td></tr></table>');
});
app.directive('compileTemplate', function($compile, $parse){
return {
link: function(scope, element, attr){
var parsed = $parse(attr.uibTooltipHtml);
console.log(attr.uibTooltipHtml);
function getStringValue() { return (parsed(scope) || '').toString(); }
console.log(getStringValue())
//Recompile if the template changes
scope.$watch(getStringValue, function() {
console.log('ca passe');
$compile(element, null, -9999)(scope); //The -9999 makes it skip directives so that we do not recompile ourselves
});
}
}
});
</script>
</head>
<body>
<div ng-app="test" ng-controller="testController">
<p style="margin-top: 5em;" uib-tooltip="Some text" >
A Thing With a Tooltip
</p>
<p style="margin-top: 5em;" uib-tooltip-html="text" compile-template>
A Thing With an HTML Tooltip
</p>
</div>
Thank you in advance for your answer
You can use uib-tooltip-template like this:
<p style="margin-top: 5em;" uib-tooltip-template="'myTooltipTemplate.html'">
A Thing With an HTML Tooltip
</p>
And then in put your html in myTooltipTemplate.html:
<table><tr ng-repeat="x in [1,2,3]"><td>{{ x }}</td></tr></table>
The template goes in a separate file.
documentation: https://angular-ui.github.io/bootstrap/#/tooltip
plnkr: http://plnkr.co/edit/tiCHpd0LipixXbO4Xfa5?p=preview
The following code is adopted from a working sample for angular 1.1.4, only using the new GreenSock api for ng-animate. toggle functionality works, as ng-show behaves as expected, however The AppAnimation functions 'list-in' and 'list-out' are not being called on ng-show.
<!DOCTYPE html>
<head>
<style>
.box { color: white; text-align: center; height: 100px; font-size: 86px; }
.on { background-color: green; }
.off { background-color: red; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.7/TweenMax.min.js"></script>
<script>
angular.module('AppAnimations', [])
.animation('list-out', ['$window',function($window) {
return {
start : function(element, done) {
console.log('list-out')
TweenMax.set(element, {position:'relative'});
var duration = 1;
//we can use onComplete:done with TweenMax, but lets use
//a delay value for testing purposes
TweenMax.to(element, 1, {opacity:0, width:0});
$window.setTimeout(done, duration * 1000);
}
}
}])
.animation('list-in', ['$window',function($window) {
return {
setup: function(element) {
TweenMax.set(element, {opacity:0, width:0});
},
start : function(element, done) {
console.log('list-in')
var duration = 1;
//we can use onComplete:done with TweenMax, but lets use
//a delay value for testing purposes
TweenMax.to(element, duration, {opacity:1, width:210});
$window.setTimeout(done, duration * 1000);
}
}
}])
angular.module('myApp', ['AppAnimations'])
.controller('MainController', ['$scope', function($scope) {
$scope.toggle = true;
}])
</script>
</head>
<body ng-app="myApp" ng-controller="MainController">
<button ng-click="toggle = !toggle">Toggle!</button>
<div class="box on" ng-show="toggle" ng-animate="{leave:'list-out', enter:'list-in'}">On</div>
<div class="box off" ng-hide="toggle" ng-animate="{leave:'list-out', enter:'list-in'}">Off</div>
</body>
</html>
<div class="box on" ng-show="toggle" ng-animate="{show: 'list-in', hide: 'list-out'}">On</div>
<div class="box off" ng-hide="toggle" ng-animate="{show: 'list-in', hide: 'list-out'}">Off</div>
So I finally solved it.. you are using leave/enter and should be using show/hide. I updated the names to be more PC correct.
<div class="box on" ng-show="toggle" ng-animate="{hide:'list-hide', show:'list-show'}">On</div>
<div class="box off" ng-hide="toggle" ng-animate="{hide:'list-hide', show:'list-show'}">Off</div>
angular.module('AppAnimations', [])
.animation('list-hide', ['$window',function($window) {
...
).animation('list-show', ['$window',function($window) {
Working fiddle: http://jsfiddle.net/ncapito/CTfL8/