Angularjs Ui-Bootstrap modal popup inside specified element - javascript

i have a problem with my code , this code is about append a modal to element with specific id. so that when button clicked ,this modal popup will showed inside div element with id="forModal" (div element with this id is inside view.html) ,my app using angularjs that have base html(index.html) ,one template for route(view.html),one template for modal(modal.html).
index.html
<html>
<head>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!--Ui Route-->
<script src="lib/ionic/js/angular-ui/angular-ui-router.min.js"> </script>
<!--UI Bootstrap-->
<script src="lib/ionic/js/angular-ui/ui-bootstrap-2.5.0.min.js"></script>
<!--UI Bootstrap TPLS-->
<script src="lib/ionic/js/angular-ui/ui-bootstrap-2.5.0-tpls.min.js"></script>
<!--ngCoockies-->
<script src="js/angular-cookies.js"></script>
<!-- my app's js -->
<script src="js/app.js"></script>
<!--controller js-->
<script src="js/controller.js"></script>
</head>
<body ng-app="starter">
<ui-view></ui-view>
</body>
</html>
app.js
var moduleapp = angular.module('starter', ['ionic','ui.router','ngCookies','ui.bootstrap']);
moduleapp.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state("dashboard",{
url:"/dashboard",
templateUrl:"templates/dashboard.html",
controller : "dashboardCtrl"
})
$stateProvider.state("dashboard.view",{
url : "/view",
templateUrl : "templates/view.html",
controller: "viewDataCtrl"
})
$urlRouterProvider.otherwise("/dashboard.view")
})
controller.js
moduleapp.controller('dashboardCtrl',[function(){
//some code
}])
moduleapp.controller('viewDataCtrl',['$document','$uibModal','$scope','$http','$cookies',function($document,$uibModal,$scope,$http,$cookies){
// reserve variable,declare it as object
$scope.dataColumn = {};
$scope.dataData = {};
// reserve variable for user authetication level
$scope.userLevel= $cookies.get('userLevel');
//function for finding available column
function caricolumn(){
$http.get('link for search column.php').success(function(hasil){
$scope.dataColumn = hasil;
});
}
//executing function when controller running
caricolumn();
//function for get data,return result to $scope.dataData as object
function caridata(){
$http.get('link for search data.php').success(function(hasil){
$scope.dataData = hasil;
})
}
//execute function when controller running
caridata();
//function for edit
$scope.edit = function(x){
var modalInstance = $uibModal.open({
templateUrl:'templates/modal.html',
controller:'viewDataCtrl',
//THIS IS THE PROBLEM ,appendTO doesnt work,still inject modal popup to body element
appendTo : angular.element(document.querySelector('#viewElement'))
});
}
//function for delete data
$scope.delete = function(x){
$http.post('link for deletedata.php',x).success(function(hasil){
alert(hasil);
//if output(php echo) same as string ,this condition considered as success
if(hasil == "Delete Success"){
caridata();
}
})
}
}]);
modal.html
<div class="modal-header">
<h3>Hayy</h3>
</div>
<div class="modal-body">
<p>this is Body</p>
</div>
<div class="modal-footer">
this is footer
</div>
dashboard.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ui-view>
<!--This is where view.html injected-->
</ui-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list ><a ui-sref="dashboard.add">
<ion-item>Tambah Data</ion-item></a>
</ion-list>
<ion-list ><a ui-sref="dashboard.view">
<ion-item>Tampil Data</ion-item></a>
</ion-list>
<ion-list >
<a ng-click="logout()">
<ion-item>Log Out</ion-item>
</a>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
view.html
<div id="viewElement" class="container" style="margin-top:50px;">
<h2>Data-Data</h2>
<hr/>
<table class="table table-bordered">
<thead>
<tr>
<th ng-repeat="dc in dataColumn">{{dc.KOLOM}}</th>
<th ng-if="userLevel == 'LV02' || userLevel == 'LV01'">Edit</th>
<th ng-if="userLevel == 'LV01'">Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="dd in dataData" id="dt{{dd.IDROW}}">
<td ng-repeat="ddd in dd.DATA">{{ddd}}</td>
<td ng-if="userLevel == 'LV01' || userLevel == 'LV01'"><button type="button" ng-click="edit({{dd.IDROW}})" class="btn btn-warning">Edit</button></td>
<td ng-if="userLevel == 'LV01'"><button type="button" ng-click="delete({{dd.IDROW}})" class="btn btn-danger">Delete</button></td>
</tr>
</tbody>
</table>
</div>
as you can see ,when app running .route default will go to "dashboard.view"
dashboard state is code for left sidemenu ,then dashboard.view state for viewing data(view state in child from dashboard state)
what i want is when edit button clicked inside view.html(controller : viewDataCtrl,state : dashboard.view), modal popup will appear inside div element with id="forModal" (div element with this id is inside view.html)
but with this code ,modal popup always appear inside body tag element not inside div element with id="forModal".
how can i approach this condition ? thanks

Related

Ionic hiding and showing elements ng-show?

New to JS, Ionic framework, AngularJS. I'm trying to work with ng-show && ng-click to display the header on the event of a click on a button. I am still not getting the intended result, any ideas??
Here is my index:
<body ng-app="starter" ng-controller="HomeCtrl as home">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar ng-show="display('on')" class="bar-balanced">
<ion-content>
<ion-nav-back-button class="bar-balanced">
</ion-nav-back-button>
</ion-content>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
My controller:
.controller('HomeCtrl', function($scope) {
$scope.display = function (x) {
if (x == 'on'){
return true;
}
else if (x == 'off'){
return false;
}
}
})
My view:
<ion-view ng-controller="HomeCtrl as home">
<ion-content class="splash">
</ion-content>
<ion-footer-bar class="bar-balanced">
<button ng-click="display('on')" class="button-large button-full button-clear">
<a class="button button-icon icon ion-log-in"href="#/login" >
</a>
</button>
</ion-footer-bar>
</ion-view>
If i have missed anything will edit post with updates**
I see a couple issues here, first of all both the navbar and footer-bar elements should be inside the ng-controller element. This will give the navbar access to the scope to determine if it should be shown or not.
Also, you should use a variable on the scope to determine if the navbar is shown, full example below.
var app = angular.module('myApp', []);
app.controller('HomeCtrl', function($scope) {
$scope.isNavVisible = false;
$scope.displayNav = function(x) {
if (x == 'on') {
$scope.isNavVisible = true;
} else if (x == 'off') {
$scope.isNavVisible = false;
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">
<div ng-controller="HomeCtrl">
<ion-nav-bar ng-show="isNavVisible" class="bar-balanced">
<span>Nav Content</span>
<ion-content>
<ion-nav-back-button class="bar-balanced">
</ion-nav-back-button>
</ion-content>
</ion-nav-bar>
<ion-footer-bar class="bar-balanced">
<button ng-click="displayNav('on')" class="button-large button-full button-clear">
<a class="button button-icon icon ion-log-in" href="#/login">Login</a>
</button>
</ion-footer-bar>
</div>
</html>
If you need to manipulate the nav from multiple controllers you could do that with a service like so
var app = angular.module('myApp', []);
app.service('navService', function() {
this.isNavVisible = false;
});
app.controller('RootCtrl', ['$scope', 'navService',
function($scope, navService) {
$scope.navService = navService;
}
]);
app.controller('HomeCtrl', ['$scope', 'navService',
function($scope, navService) {
$scope.displayNav = function(x) {
if (x == 'on') {
navService.isNavVisible = true;
} else if (x == 'off') {
navService.isNavVisible = false;
}
}
}
])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="RootCtrl">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar ng-show="navService.isNavVisible" class="bar-balanced">
<span>Nav Content</span>
<ion-content>
<ion-nav-back-button class="bar-balanced">
</ion-nav-back-button>
</ion-content>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-view ng-controller="HomeCtrl">
<ion-content class="splash">
</ion-content>
<ion-footer-bar class="bar-balanced">
<button ng-click="displayNav('on')" class="button-large button-full button-clear">
<a class="button button-icon icon ion-log-in" href="#/login">
Login
</a>
</button>
</ion-footer-bar>
</ion-view>
</body>
You should use the ng-click directive to change a value like this:
.controller('HomeCtrl', function($scope) {
$scope.displayItem = false;
$scope.display = function (x) {
if (x == 'on'){
$scope.displayItem = true;
}
else if (x == 'off'){
$scope.displayItem = false;
}
}
})
And then inside your View:
<ion-nav-bar ng-show="displayItem" class="bar-balanced">
<ion-content>
<ion-nav-back-button class="bar-balanced">
</ion-nav-back-button>
</ion-content>
</ion-nav-bar>
Your View, will still the same
<ion-footer-bar class="bar-balanced" ng-controller="HomeCtrl as home">
<button ng-click="display('on')" class="button-large button-full button-clear">
<a class="button button-icon icon ion-log-in"href="#/login" >
</a>
</button>
</ion-footer-bar>
Make sure that both html refers to the same controller. Otherwise you will not have access to the $scope.displayItem property.
In case yo want to share data between different controllers, you should look for another alternative, like a Factory/service or property inside the $rootScope.

Ionic modal - document.getElementById not working in modal

I have an ionic modal presented like so:
$ionicModal.fromTemplateUrl('templates/my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal
$scope.modal.show()
})
The modal looks like this:
<ion-modal-view ng-controller="EditCtrl" class="modal">
<ion-header-bar class="modal-header-bar">
<button class="button button-clear">Cancel</button>
<h1 class="title">Edit</h1>
<button class="button button-clear">Save</button>
</ion-header-bar>
<ion-content>
<div id="foo"></div>
</ion-content>
</ion-modal-view>
Then in edit_controller.js:
document.getElementById('foo')
Returns null. How can I have document refer to the currently shown modal?

How to increase a number in badge on ionic

I'd like to increase a number in a badge.
I set the number 0 in 'app.js'.
And I made minus button, plus button and textbox.
There is a number in the textbox.
If I tab the minus or plus button, the number would change.
I added an action in the button click function.
But the number in badge is not changed.
This is my code to change the number.
example.controller('EventController', ['$scope', function($scope) {
$scope.count = 0;
$scope.countBadge = 0;
$scope.$on('orderMinus', function() {
if($scope.count!=0){
$scope.count--;
}
if($scope.countBadge != 0){
$scope.countBadge--;
}
});
$scope.$on('orderPlus', function() {
if($scope.count<=29){
$scope.count++;
$scope.countBadge++;
}
});
}]);
<script id="page_dish.html" type="text/ng-template">
<div>
<ion-header-bar style="height:10%; background: none; border-bottom: none">
<a id = "button_menuList" href="#/page_menuList"></a>
<a id = "img_chopchop"></a>
<div ng-controller="EventController">
<span class="badge badge-assertive">{{countBadge}}</span>
</div>
<a id = "button_basket" href="#/page_join"></a>
</ion-header-bar>
</div>
<ion-view class = "page_dish" ng-controller="AppCtrl">
<ion-content class = "no-header no-footer" has-bouncing="false">
<ion-slide-box>
<ion-slide class = "episode1">
<div align = "left">
<img src="img/Episode/Main/Episode1/Text_title.png" style="width:80%; margin-left:5%; margin-top:25%;">
<img src="img/Episode/Main/Episode1/Label_price.png" style="width:40%; margin-left:5%; margin-top:4%;">
</div>
<div>
<a id = "button_learnMore1" ng-click="modal.show()"></a>
</div>
<div align = "left" ng-controller="EventController">
<a class = "button_minus1" ng-click="$emit('orderMinus')"></a>
<input type="text" style="position:absolute; width:95px; height:65px; margin-left:37.4%; font-size:55px; color:#ffffff; background-color:transparent; text-align:center;" value = {{count}} readonly = "true">
<a class = "button_plus1" ng-click="$emit('orderPlus')"></a>
</div>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-view>
</script>
How to fix my code to change the number in badge with click the button.
Please, help me.
The problem with your code is that you are instantiating several times EventController, so the $scope is different for each instance (that's the reason why in the $scope where the buttons exist the counter gets updated, but on the other EventController $scope it won't: it's not listening the same scope events).
Considering your approach, the easiest solution is to use $rootScope instead of $scope, so you listen and emit on $rootScope and both EventControllers notice the changes.
Another cleaner approach which I'd prefer is to put count and countBadge inside a service (that is a singleton), and create a watch to ensure that when counter is updated by one controller, the other one gets the updated value.
I attach the first solution in code snippet, cleaning a little bit the code to make it clear:
example.controller('EventController', ['$scope', '$rootScope', function($scope, $rootScope) {
$scope.count = 0;
$scope.countBadge = 0;
$scope.emit = $rootScope.$emit;
$rootScope.$on('orderMinus', function() {
if($scope.count!=0){
$scope.count--;
}
if($scope.countBadge != 0){
$scope.countBadge--;
}
});
$rootScope.$on('orderPlus', function() {
if($scope.count<=29){
$scope.count++;
$scope.countBadge++;
}
});
}]);
<script id="page_dish.html" type="text/ng-template">
<div>
<ion-header-bar style="height:10%; background: none; border-bottom: none">
<a id = "button_menuList" href="#/page_menuList"></a>
<a id = "img_chopchop"></a>
<div ng-controller="EventController">
<span class="badge badge-assertive">{{countBadge}}</span>
</div>
<a id = "button_basket" href="#/page_join"></a>
</ion-header-bar>
</div>
<ion-view class = "page_dish" ng-controller="AppCtrl">
<ion-content class = "no-header no-footer" has-bouncing="false">
<!-- some stuff -->
<div align = "left" ng-controller="EventController">
<a class = "button_minus1" ng-click="emit('orderMinus')"></a>
<!-- some more stuff -->
<a class = "button_plus1" ng-click="emit('orderPlus')"></a>
<!-- some more stuff -->
</ion-content>
</ion-view>
</script>

ng repeat list not getting updated when menu and content is in different template (Ionic Framework)

I am working on one ionic framework project.
Where am stuck of list not getting updated. Once menu item is clicked the list should be updated accordingly.
As both things are in different controller I don't have any idea how I can do scope.apply
Below is mine code.
Menu.html
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
<ion-nav-bar class="bar-assertive">
<ion-nav-back-button class="button-clear button-icon ion-ios-arrow-back">
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="mainContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">Services</h1>
</ion-header-bar>
<ion-content>
<div class="list" ng-controller="serviceCtrl as vm">
<a menu-close class="item item-icon-right item-dark" ng-repeat="services in vm.menu" ng-click="vm.setService(services.id)">
{{services.name}}
<i class="icon ion-ios-arrow-right ion-accessory"></i>
</a>
</div>
<!-- </ion-content> -->
</ion-side-menu>
</ion-side-menus>
Menu services
angular.module('starter').controller('serviceCtrl', ['$state','serviceFactory','$scope','$rootScope', serviceCtrl]);
function serviceCtrl($state, serviceFactory,$scope,$rootScope) {
var vm = this;
var menu = serviceFactory.getService();
vm.menu = menu;
/* var data = serviceFactory.getService();
vm.menu = data.menu;*/
vm.setService = function(menuId){
//$scope.$apply(function() {
//alert('a');
serviceFactory.setService(menuId);
//$scope.subServiceId = menuId;
$state.go('app.sub');
setTimeout(function(){
alert('asdf')
$scope.$apply()
}, 300);
//});
};
};
LIst page that needs to be updated
<ion-view view-title="{{vm.menu[vm.subServiceId-1]['name']}}" ng-controller="subServiceCtrl as vm">
<ion-content>
<div class="list">
<a class="item item-icon-right" ng-repeat="services in lists" ng-click="vm.setSubService(services.sname)">
{{services.sname}}
<i class="icon ion-ios-arrow-right ion-accessory"></i>
</a>
</div>
</ion-content>
</ion-view>
And list controller
angular.module('starter').controller('subServiceCtrl',['$state','serviceFactory','$scope','$rootScope',subServiceCtrl]);
function subServiceCtrl($state,serviceFactory,$scope,$rootScope) {
var vm = this;
//get the sub services
var menu = serviceFactory.getService();
$scope.menua = menu;
var subServiceIda = serviceFactory.actSercice();
vm.subServiceId = serviceFactory.getSelected();
$rootScope.lists = menu[subServiceIda-1].subItems;
alert('as check');
console.log(vm.subServiceId);
alert("First level menu id is "+vm.subServiceId);
vm.menuId = serviceFactory.setFirstId();
//to get the selected sub item. second call to setService()
//$scope.$apply();
if(!$scope.$$phase) $scope.$apply()
vm.setSubService = function(subname) {
serviceFactory.setService(subname);
$state.go('app.next');
//$scope.$apply();
};
};
Ok I ownself solved it.
Just added
cache: false,
in RouterProvider.

Javascript not getting called inside div of ionic template hml file

In my ionic app from the controller I received a json string of comma separated values. I want to display the json string in a html in tabular format. The html is placed inside template directory.
I am calling a java script function from the div of html to achieve this but the js function is not getting hit. The js is included in index.html. What I am doing wrong?
Here is the sample:
the template/shop.html file:
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Dashboard Tab -->
<ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong">
<ion-view view-title="Shop">
<ion-content>
<ion-list>
<ion-item ng-repeat="shop in shopList">
<!--
<div class="row">
<div class="col col-50 text-center">
<script type="text/javascript">
**createTable({{shop.Method}})**
</script>
</div>
</div>
-->
<div id="Method"></div>
<script>
console.log("Inside div"); **HERE IS THE CALL TO JS FUNCTION**
**createTable({{shop.Method}});**
</script>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes">
<ion-view view-title="Shop">
<ion-content>
<ion-list>
<ion-item ng-repeat="shop in shopList">
<div class="row">
<div class="col col-50 text-center">
{{shop.Offers}}
</div>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</ion-tab>
And here is my smaple JS function placed in utility.js
//function createTable($scope, method){
function createTable(Method){
// var tar=document.getElementById(Method);
// $scope.shopMethod = [];
var table=document.createElement('TABLE');
table.border='1';
var tbdy=document.createElement('TBODY');
table.appendChild(tbdy);
for (var j=0;j<4;j++){
var tr=document.createElement('TR');
tbdy.appendChild(tr);
for (var k=0;k<2;k++){
var td=document.createElement('TD');
td.width='100';
if(k==0) td.innerHTML="School" +(j+1);
else td.innerHTML="Percent" +(j+1);
tr.appendChild(td);
}
}
//tar.appendChild(table);
// <div class="row">
// <div class="col col-50 text-center">
// {{shop.Method}}
// </div>
// </div>
// </div>
// $scope.shopMethod.push(table);
console.log(table);
//document.getElementById(Method).innerHTML="Hello"
}

Categories