I tried to hide some menus using a controller. Here is my element container where the menu will be loaded.
<div class="page-content" ng-controller = "menuController">
<div id="Menu" > </div>
<div ng-view> </div>
</div>
<script>
$(function(){
$("#Menu").load("Menu.html");
});
app.controller("menuController", function($scope) {
$scope.showMenu = false;
});
</script>
I wrote the menu in seperate html file.
<div class="category-content no-padding">
<ul ng-show= "showMenu">
<li><i class="fa fa-h-square text-brown" aria-hidden="true"></i><span>Organization</span>
</li>
<li><i class="fa fa-hospital-o text-brown" aria-hidden="true"></i><span>Clinic</span>
</li>
<li><i class="fa fa-user text-brown" aria-hidden="true"></i><span >User</span>
</li>
</ul>
</div>
But for me scope variable declared in the controller does not have any impact on menu. Please help me to overcome this.
Thanks for your valuable time.
Mixing Jquery code with Angular code is not very good.
You can use angular's ng-include directive to load your menu:
<div class="page-content" ng-controller = "menuController">
<div ng-include="'Menu.html'" > </div>
<div ng-view> </div>
</div>
Depending on the location of Menu.html, you may have to precise the entire path, for example:
<div> ng-include="'folder/subfolder/Menu.html'" </div>
Related
I have an app where, when a thumbnail is clicked a modal will open and play the video connected to the thumbnail. What I need to do is add a class to the body tag when this modal is open so I can stop the body content scrolling behind the modal.
I am using an ng-click to activate an ng-show and ng-if. The problem is all of this is inside the scope of an ng-repeat which in turn is inside the view. I am new to Angular and any help would be appreciated.
<div class="videos" ng-controller="modalCtrl">
<ul>
<li class="clear-fix" ng-repeat="video in filtered = videos | filter:search | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
<!-- THIS ACTIVATES THE MODAL WHEN CLICKED -->
<div ng-click="showModal = !showModal" class="item-thumbnail float-left pointer" back-img="{{video.thumbnail}}">
</div>
<div class="item-details-container float-left">
<div class="item-header">
<div ng-click="showModal = !showModal" class="item-title pointer">
<h3 class="underline">{{video.title}}</h3>
</div>
<div class="item-author pointer">
<span>by: <a class="underline" ui-sref="{{video.author_link}}">{{video.author}}</a></span>
</div>
</div>
<div class="item-description">
<p>{{video.description.trunc(150)}}</p>
</div>
</div>
<!-- THIS IS THE MODAL BACKGROUND COVER -->
<div ng-show="showModal" class="modal-cover"></div>
<!-- THIS IS THE MODAL -->
<div ng-show="showModal" class="modal-container">
<div ng-if="showModal" class="video-modal clear-fix">
<button class="btn-close" ng-click="$parent.showModal = false">
<span></span>
<span></span>
</button>
<div class="video-container float-left">
<youtube-video video-url="video.url"></youtube-video>
</div>
<div class="video-info-container float-right">
<div class="video-info">
<div class="item-header">
<div class="item-title">
<h3>{{video.title}}</h3>
</div>
<div class="item-author pointer">
<span>by: <a class="underline" ui-sref="{{video.author_link}}">{{video.author}}</a></span>
</div>
</div>
<div class="item-description">
<p>{{video.description}}</p>
</div>
</div>
<div class="voting-container clear-fix">
<div class="votingButton btn-solid pointer" ng-click="upVote(video); showDetails = !showDetails">
<i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
</div>
<div class="bugButton btn-solid pointer">
<i class="fa fa-flag-o" aria-hidden="true"></i>
</div>
<div ng-show="showDetails = showDetails"><span>Thank you for voting.</span></div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Here's what you need to do :
You can use ng-class in your body tag like this
<body ng-class="{'is-modal-open': freeze}">
And you can write ng-click on your thumbnail like this
<div class="thumbnail" ng-click="is-modal-open=true"></div>
You could just make a div in your template like this:
<div class="fullscreen-modal">
//content here
</div>
And in your controller you could do this:
var elementResult = element[0].getElementsByClassName('fullscreen-modal');
angular.element(document.body).append(element);
Now your element is a direct child of <body>.
OR
Define the modal div outside of ng-repeat.
Then define a scope function
$scope.openModal() = function(contentOrVideoId)
{
//put logic here
$scope.showModal = true;
$scope.modalContent = contentOrVideoId;
}
And just call this function inside ng-repeat with ng-click="openModal('IdOrContent')"
You are looking for ngClass directive.
So if you would add this to the body element you want to disable scrolling on, it would give you what you are looking for:
<div ng-class="{'is-modal-open': showModal}">
In short, this will add the class is-modal-open when showModal validates to true
Just to clarify (Thanks #Ronnie), you need to make sure the <div> that contains what you call body is inside the scope of your controller (somewhere inside the div that has ng-controller). And you shouldn't put it directly on the <body> tag
[edit]
I don't like using $rootScope, but you could try this:
<body ng-class="{'is-modal-open': showModal}">
// Your div
<div ng-click="showHideModal()" class="item-title pointer">
// your controller
app.controller('modalCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {
$scope.showHideModal = function() {
$rootScope.showModal = !$rootScope.showModal;
};
}]);
This question have good chance to be a duplicate, but after some searches I wasn't able to find a good explanation to my problem - so I apologize if this is the case.
Well, I got a template which is actually written like this:
<div ng-include="'includes/header.html'"></div>
<section>... Template for homepage, page1, page2... </section>
<div ng-include="'includes/footer.html'"></div>
My header.html is like this:
<section class="header">
<div class="wrapper">
<img id="logotype" src="images/logotype.png">
<ul id="menu">
<li>
Home
</li>
<li class="border-none">
<a class="a" ng-click="chatClicked = !chatClicked">Click to chat</a>
</li>
<li id="logout" class="glyphicon glyphicon-off border-none">
Logout
</li>
</ul>
</div>
</section>
And my footer.html like this:
<section class="footer">
<div class="wrapper">
<ul id="menu-left">
<li>
Home
</li>
<li>
<a class="a" ng-click="chatClicked = !chatClicked">Click to chat</a>
</li>
</div>
</section>
I was wondering if there is a way to open open/hide this new include on all pages (
<div ng-if="chatClicked" ng-controller='ChatController' ng-include="'includes/popup-chat-to-click.html'"></div>
) each time the event chatCliked is triggered - and if it is possible - where it is the best to place this last div?
Ok problem resolved using this link, sorry:
AngularJS - losing scope when using ng-include
This was a matter of $scope.
I had to add this in my controller:
app.controller('homeController',
['$scope'',
function ($scope) {
$scope.chat = { clicked: false };
}]);
in my main view:
<div ng-include="'includes/header.html'"></div>
<div ng-if="chat.clicked" ng-controller='ChatController' ng-include="'modules/chat/popup-contact.html'"></div>
in my header.html:
<a class="a" ng-click="chat.clicked = !chat.clicked">Contact us</a>
I am an angular newbie. Fiddling around with $scope.
I have this snippet in my main view:
<div ng-controller="MainCtrl" class="ng-scope">
<ul class="nav navbar-nav navbar-right">
<li></span><span class="badge">{{ badgeCount }}</span></li>
</ul>
</div>
....
<div class="container">
<ui-view></ui-view>
</div>
home.html gets loaded through ui-view.
Inside home.html, I have
<div ng-repeat='item in items'>
<td> <button type="submit" class="btn btn-default btn-lg btn-success" ng-model="orderCnt" ng-click="placeOrder(item.desc)"><span class="glyphicon glyphicon-cutlery"></span></button> </td>
</div>
The controller is MainCtrl.
My controller is:
controller('MainCtrl', ['$scope', function($scope, menus) {
$scope.items = [];
$scope.badgeCount = 0;
$scope.orderCnt = 0;
console.log("badgecount=",$scope.badgeCount)
console.log("ordercnt=",$scope.orderCnt)
$scope.placeOrder = function(value) {
$scope.orderCnt ++;
console.log(value)
console.log($scope.orderCnt)
console.log("ng click")
};
$scope.$watch('orderCnt', function(newVal, oldVal){
console.log(newVal + " " + oldVal);
$scope.badgeCount++;
console.log("watch")
},true);
For any ng-click on placeOrder, I would expect the badgeCount to get updated on the shopping cart icon as well. Its not happening. Do I need to emit/broadcast this since its a different view? I was thinking since both have same controllers, same $scope would be bound. Any help would be appreciated.
Is your container div a child of the <div ng-controller="MainCtrl" class="ng-scope">? If not then they will have different scopes. Changes in one will not be seen in another.
Some other points
you don't need ng-model defined on the button, doesn't make sense cause it doesn't get changed.
why are you watching orderCnt in this case? It only changes in scope.placeOrder so you can call $scope.badgeCount++; in scope.placeOrder
EDIT: If you want the view to have the same scope you can place it as a child of the main controller. Also note that you're missing a > in your definition of <a href"#"
<body ng-controller="MainCtrl">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-shopping-cart gi-2x"></span><span class="badge">{{ badgeCount }}</span></li>
</ul>
<div class="container">
<ui-view></ui-view>
</div>
</body>
I am trying to use a url to call a tab element. For example, a url like: localhost:9000/widget&view=map will land on the page with the map tab selected and shown the map tab body.
<div class="search-result-tab" ng-init="selectTab='list'">
<ul class="nav tab-header">
<li ng-class="{active: selectTab=='list'}" ng-click="selectTab='list'; changedTab()">
<a href={{listTabURL}}>List</a>
</li>
<li ng-class="{active: selectTab=='map'}" ng-click="selectTab='map'; changedTab()">
<a href={{mapTabURL}}>Map</a>
</li>
</ul>
<div class="tab-body" ng-switch on="selectTab">
<div class="tab-content" ng-switch-when="list">
<div ng-include="'list.html'"></div>
</div>
<div class="tab-content" ng-switch-when="map">
<div ng-include="'map.html'"></div>
</div>
</div>
</div>
Other urls are:
list: localhost:9000/widget&view=list
map: localhost:9000/widget&view=map
Similar question here. One suggestion is to inject the $location service and switch on $location.path, might be worth a try if you are not going to try ui-router (which you really should look into!)
function Ctrl($scope, $location) {
$scope.pagename = function() { return $location.path(); };
};
<div id="header">
<div ng-switch on="pagename()">
<div ng-switch-when="/home">Welcome!</div>
<div ng-switch-when="/product-list">Our products</div>
<div ng-switch-when="/contact">Contact us</div>
</div>
</div>
Being new to Angularjs, I need a bit of help with this issue. I am attempting to add ng-click="getGallery(57)" to a modal tab. Adding via jQuery is not the issue, however I realize when I do this, Angular is not compiling the newly added ng-click. I have a simple controller
function imageGalleryCtrl ($scope, $http) {
//get gallery info on click
$scope.getGallery = function(id)
{
$http.post('/beta/images/get_images',{'id': id}).success(function(data)
{
$scope.images = data.thisGal_images;
$scope.images.galID = id;
});
};
}
I add the ng-click to the element with jQuery
//Edit image tab to use angularjs
$('#image_edit a').attr('ng-click','getGallery(' + settings.id + ')');
How do I force Angular to compile this newly added ng-click?
Thanks!
HTML Modal:
This is the modal that is called when the gallery name is clicked.
<div class="modal fade hide modal-creator" id="imageUploader" tabindex="-1" data-focus-on="input:first">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button>
<h3>Create New Gallery</h3>
</div>
<div class="modal-body">
<ul id="myTab" class="nav nav-tabs">
<li id="image_home" class="">
Home
</li>
<li id="image_upload" class="">
Upload Image Gallery
</li>
<li id="image_edit" class="">
Edit Image Gallery
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in" id="home">
<?php include('create.php'); ?>
</div>
<div class="tab-pane fade" id="upload">
<?php include('upload.php'); ?>
</div>
<div class="tab-pane fade" id="edit">
<div class="span9">
<ul id="imageSort" class="gallery-container">
<li ng-repeat="image in images">
<img ng-src="http://images.onlinealbumproofing.com/imageGallery/{{image.galleryID}}/{{image.imageName}}" alt="">
{{image.orgName}}
</li>
</ul>
</div><!-- /span9 -->
</div><!-- /row -->
</div>
</div>
</div><!-- /modal-body -->
<div class="modal-footer">
Close
Next
</div>
</div>
Update
So really attempting to do this the Angular way, and after some studies here is where I am at.
The controller is the same as above and I have updated the tabs on the modal as follows.
<div class="modal-body">
<ul id="myTab" class="nav nav-tabs">
<li id="image_home" class="">
Home
</li>
<li id="image_upload" class="">
Upload Image Gallery
</li>
<li id="image_edit" class="">
<a ng-click="getGallery(57)" href="#edit" data-toggle="tab">Edit Image Gallery</a>
</li>
</ul>
If I hard code the ng-click as above, the tab updates as expected. What I am trying to make happen, is when the modal is called, (#image_edit a) gets a defined ng-click="getGallery(id). I need to tell Angular to look at the ng-click again for the id.
Although I too think that you should try and find another approach, the answer to your question
How do I force Angular to compile this newly added ng-click?
is
// remove and reinsert the element to force angular
// to forget about the current element
$('#button1').replaceWith($('#button1'));
// change ng-click
$('#button1').attr('ng-click','exec2()');
// compile the element
$compile($('#button1'))($scope);
See this working example: http://plnkr.co/edit/SgvQzaY0TyFHD1Mf0c3F?p=preview
Basically what I'm getting at is you want to probably make this happen:
<ul id="imageSort" class="gallery-container">
<li ng-repeat="image in images">
<img
ng-src="http://images.onlinealbumproofing.com/imageGallery/{{image.galleryID}}/{{image.imageName}}"
alt=""
ng-click="getGallery(image.galleryID)"
>
{{image.orgName}}
</li>
</ul>
The problem is I'm unsure of the relationship between the settings.id and the galleryID for a particular image. If you can set up this relationship in the data so it just automatically binds you're in better shape.