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.
Related
Here i am trying to add one page controller adding to another controller using same module in angular js. how can i add ctrl2.js menu to inside ctrl1.js.please help me currently i am using angualrjs one .. i am struck in this issue please give me a solution ...
menu.html:
<div id="left-top" ng-controller="two">
<ul class="nav navbar-nav navbar-right menu-top-left col-sm-12 col-xs-12">
<li>
<a href="#/">
<i class="material-icons mobile-menu-icon-color">exit_to_app</i>
<span class="notification mobile-menu-icon-color">Logout</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons mobile-menu-icon-color">person</i>
<span class="notification mobile-menu-icon-color">{{name}}</span>
</a>
</li>
</ul>
</div>
ctrl1.js
var app=angular.module('board',[]);
app.controller('one',function($scope){
alert("ctrlone');
});
ctrl2.js
var app=angular.module('board',[]);
app.controller('two',function($scope){
});
<div ng-controller="firstController">
<div ng-controller="secondController"></div>
</div>
if you want to use common $scope(your data) for ctrl1 and ctrl2, you need to create service for this, and after inject service to ctrl1, and ctrl2
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>
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 downloaded the angular-ui-tree package and installed it in a webserver. I can bring up the example pages fine in my browser, but all the click actions on the buttons (to collapse/expand the tree, add node etc) do not work. I don't get any errors in firebug.
If I point my browser at the public page for the tree component ( https://jimliu.github.io/angular-ui-tree/index.html) it does work.
I did some debugging and found that the problem is when ng-repeat is called for a ui-tree-node element, an ng-click action does not work.
In the code below, the test() function is in my controller and it gets executed if I remove the ui-tree-node or ng-repeat tags.
<li ui-tree-node ng-repeat="node in mydata" >
<a ng-click="test()" >{{node.title}} </a>
</li>
Is this a bug in angular tree component?
Is there some way I can fix this in my environment?
The fix was to add the data-nodrag tag in the top level ui-tree-nodes element.
(adding data-nodrag in the li element also works).
You can use both:
click with toggle(this)
drag
together, just make sure that the element to expand/collapse ist not within the ui-tree-handle
<script type="text/ng-template" id="tree_renderer.html">
<div ng-class="{collapsed: collapsed}">
<div class="ctx_node"
ui-on-drop="onDrop($event, $data, ctx,node); active=false">
<span class="expanded"
ng-click="toggle(this)"
ng-class="{'collapsed': collapsed,'expanded': !collapsed}">
</span>
<span ui-tree-handle>{{node.title}}</span>
</div>
</div>
<ol ui-tree-nodes="" ng-model="node.nodes">
<li ng-repeat="node in node.nodes"
ui-tree-node ng-include="'tree_renderer.html'">
</li>
</ol>
</script>
<div ui-tree data-drag-enabled>
<ol ui-tree-nodes="" ng-model="node.nodes" id="tree-root">
<li ng-repeat="node in node.nodes"
ui-tree-node ng-include="'tree_renderer.html'"></li>
</ol>
</div>
Folks,
In using the drop-down toggle of ui.bootstrap .. the component is adding a new line to my menubar instead of falling in line.
I have created a plunker for the same here. As you will see that between button3 and button 4 I have insert a dropdown toggle which breaks the menubar and goes to the next line.
http://plnkr.co/edit/gist:3662702
Any clue as to how I can avoid this ?
I am also placing the code below:
in html file:
<body ng-controller="MainCtrl">
<div class='btn btn-small' >Button1</div>
<div class='btn btn-small' >Button2</div>
<div class='btn btn-small' >Button3</div>
<ul class="dropdown">
<a class="dropdown-toggle">Drop-down menu</a>
<ul class="dropdown-menu">
<li ng-repeat="c in collection">
<a>{{c.name}}</a>
</li>
<li class="divider"></li>
</ul>
</ul>
<div class='btn btn-small' >Button4</div>
</body>
In js file:
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
$scope.collection = [{"name":"Angular"},{"name":"Bootstrap"}];
});
Ok so your issue comes from the ul tag (the one with css class dropdown). In your case you should write something like :
<div class='btn btn-small' >Button3</div>
<span class="dropdown">
<a class="dropdown-toggle">Drop-down menu</a>
<ul class="dropdown-menu">
<li ng-repeat="c in collection">
<a>{{c.name}}</a>
</li>
<li class="divider"></li>
</ul>
</span>
<div class='btn btn-small' >Button4</div>
Note how I replace the ul tag by a span one. By default the ul tag have a css property display set to block causing the line break. With the span tag the display is set to inline ensuring that the line will not break.
See the forked plunker : http://plnkr.co/edit/zKeIJczttqBUzO9OchJy