Hi I´m new to Angular JS, and I am trying to create a "lightbox" by showing or hiding a div that fills the screen. However, the "ng-click" event and the div are on different templates.
First Template (where the div is supposed to show up):
<body ng-app="portfolio" ng-controller="lightboxController" >
<div ng-show="lightbox" class="lightbox">
<p ng-click="checkLightbox()">go back</p>
<p>{{message}}</p>
</div>
<div class="top-menu">
portfolio
about
contact
</div>
<div id="content-wrapper">
<div id="main-content">
<div ng-view></div>
</div>
</div>
</body>
Relevant controller:
app.controller('lightboxController', function($scope) {
$scope.checkLightbox = function(){
$scope.lightbox;
lightbox= !lightbox;
console.log(lightbox);
};
$scope.message = 'Everyone come and see how good I look!';
});
Second Template (where the ng-click event is):
<div class="grid">
<div class="grid-item dreiD video" ng-click="checkLightbox()">
<img src="data/portfolio/logo-animation/thumb.gif" class="thumb"/>
The error message says: ReferenceError: lightbox is not defined
Do as below:
Your html look like
<body ng-app="app" ng-controller="lightboxController" >
<div ng-show="lightbox" class="lightbox">
<p ng-click="checkLightbox()">go back</p>
<p>{{message}}</p>
</div>
<div class="top-menu">
portfolio
about
contact
</div>
<div id="content-wrapper">
<div id="main-content">
<div ng-view></div>
</div>
</div>
<div class="grid">
<div class="grid-item dreiD video" ng-click="checkLightbox()">
<img src="data/portfolio/logo-animation/thumb.gif" class="thumb"/>
</div>
</div>
</body>
Angular controller look like:
var app = angular.module('app', []);
app.controller('lightboxController', function($scope) {
$scope.checkLightbox = function(){
$scope.lightbox;
$scope.lightbox= !$scope.lightbox;
console.log(lightbox);
};
$scope.message = 'Everyone come and see how good I look!';
});
You can run this by clicking here
Im not really sure what your checkLightbox() method are supposed to do.
But if you want to make this reusable the best solution would be to refactor the checkLightbox functionality into a reusable directive.
Something like this:
function checkLightbox() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.on('click', function() {
// add your code here
})
}
}
}
app.directive('checkLightbox', checkLightbox);
Now you can use this anywhere in your views by adding the check-lightbox attribute wherever you want.
<div class="grid">
<div class="grid-item dreiD video" check-lightbox>
<img src="data/portfolio/logo-animation/thumb.gif" class="thumb"/>
Declare function or variable in $rootScope whenever you need to use them in any other controller.
Convert your controller into a factory and create the scopes at the $rootScope level:
app.factory('lightboxController', ['$rootScope', function($rootScope) {
$rootScope.checkLightbox = function(){
$rootScope.lightbox;
lightbox= !lightbox;
console.log(lightbox);
};
$rootScope.message = 'Everyone come and see how good I look!';
}]);
Related
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.
I have made an Angular function that leads to a link on click. My doubt is the I want the page to jump/scroll down when a cube is clicked in: https://codepen.io/Feners4/pen/KggAwg
I tried to link using an Id tag, but I wasn't successful.This is my Javascript:
directive('myClick', () => {
return {
restrict: 'A',
link: (scope) => {
scope.clicked = () => {
console.log('pppp');
window.location = "#/test.html";
}
}
};
});
The HTML of the cubes is the following:
<body ng-app="App">
<div ng-click="clicked()" my-click class="wrap">
<div class="cube" change-background colorcode=¨#f45642¨>
<div class="front"><span>Resume</span></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>
How can I use my function to achieve jumping the page to the bottom where I'm making a "second page" within the same one?
I didn't see an id for #/test.html in your document. You'll need to add the correct id. Also, you'll want to use window.location.hash.
For example:
window.location.hash = "#snap1":
You can use angular-scroll directive.
https://github.com/oblador/angular-scroll
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.
http://codepen.io/Feners4/pen/KggAwg
I've been trying to get this cube I created and make it change color on mouse hover with Angular. For testing purposes, I started with changing the color of just on side of the cube. However, I keep getting this error on the console:
Error: $injector:modulerr Module Error
My Html is:
<header>
Angularity
</header>
<h1>hjskl</hi>
<body>
<div class="container" ng-controller="AppCtrl">
</div>
</header>
<div class="wrap">
<div class="cube">
<div ng-app="App" class="front" change-background colorcode=¨#FE0883¨></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>
My JS is:
angular.module('App', ['appf'])
.directive('changeBackground', ['$animate', function($animate) {
return {
restrict: 'EA',
scope: {
colorcode: '#?'
},
link: function($scope, element, attr) {
element.on('mouseenter', function() {
element.addClass('change-color');
element.css('background-color', $scope.colorcode);
});
element.on('mouseleave', function() {
element.removeClass('change-color');
element.css('background-color', '#fff');
});
}
};
}])
How can I fix this error in my code? Does it have to do with the placement of the ng-app in my html?
Changing
angular.module('App', ['appf'])
to
angular.module('App', [])
seemed to work. 'appf' appears to be a dependency that the module cannot find.
I want to add some css-classes into my html document. When I use my app without json(simple $scope.resumes = [{..some data..}]) it works nice, but when I include json file it works bad(i see necessary data, but without css-classes)
var myApp = angular.module('myApp', []);
myApp.controller('ResumeListCtrl', function ($scope, $http) {
$scope.title="resume";
$http.get(window.location+'/js/resumes.json').success(function(data){
$scope.resumes= data;
});
});
$(document).on("ready", function() {
$(".box:even").addClass("hvr-bubble-right").addClass("margin_right_5").addClass("box-float-right");
$(".box:odd").addClass("hvr-bubble-left").addClass("margin_left_5").addClass("box-float-left");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="expa col-xs-6 col-sm-6 col-md-6 col-lg-6" ng-repeat="resume in resumes">
<div class="box" >
<h3 class="h3-style">{{resume.name}}</h3>
<div class="description_company_name"><span>{{resume.company}}</span><span><i
class="fa fa-circle"></i></span><span>{{resume.year}}</span></div>
<div class="hidden-xs">
{{resume.description}}
</div>
</div>
</div>
Use ng-class-even and ng-class-odd like this:
<div class="box" ng-class-odd="'hvr-bubble-left margin_left_5 box-float-left'" ng-class-even="'hvr-bubble-right margin_right_5 box-float-right'">
<h3 class="h3-style">{{resume.name}}</h3>
<div class="description_company_name"><span>{{resume.company}}</span><span><i class="fa fa-circle"></i></span><span>{{resume.year}}</span></div>
<div class="hidden-xs">{{resume.description}}</div>
</div>
If you use the append class on document ready, it might be too early.
Insert these two:
$(".box:even").addClass("hvr-bubble-right").addClass("margin_right_5").addClass("box-float-right");
$(".box:odd").addClass("hvr-bubble-left").addClass("margin_left_5").addClass("box-float-left");
In here
$http.get(window.location+'/js/resumes.json').success(function(data){
$scope.resumes= data;
});
When the document is ready does not mean that the JSON post is also ready :)