Develop Reference

Can't open a modal window in angularjs, using bootstrap

This is my app.js file:
const app = angular.module('CurseTransport', [
'ui.router',
'ui.bootstrap',
'ngMessages',
'raceModule',
])
app.config(['$stateProvider', '$urlRouterProvider', '$qProvider', function($stateProvider, $urlRouterProvider, $qProvider) {
$qProvider.errorOnUnhandledRejections(false)
$urlRouterProvider.otherwise('/races')
$stateProvider
.state('races', {
url : '/races',
templateUrl :'views/races.html',
controller:'racesController'
})
.state('racesInsert', {
url: '/races/insert',
onEnter: ['$stateParams', '$state', '$modal',
function($stateParams, $state, $modal) {
$modal
// handle modal open
.open({
template: 'views/racesInsert',
windowClass : 'show',
controller: ['$scope',
function($scope) {
// handle after clicking Cancel button
$scope.cancel = function() {
$scope.$dismiss();
};
// close modal after clicking OK button
$scope.ok = function() {
$scope.$close(true);
};
}
]
})
// change route after modal result
.result.then(function() {
// change route after clicking OK button
$state.transitionTo('races');
}, function() {
// change route after clicking Cancel button or clicking background
$state.transitionTo('races');
});
}
]
});
}])
My view for modal window:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
When i click my button for open the modal window, it is not working. I have no error in my console. I also included in my scripts.
My modal is located in a different html file.

Have you read the documentation? https://angular-ui.github.io/bootstrap/#/modal
You need to use templateUrl, not template when referencing your modal template, and be sure to include the file extension:
$modal.open({
templateUrl: 'views/racesInsert.html',
windowClass : 'show',
...
Only use template if you are defining the template inline like this:
$modal.open({
template: '<div class="modal-header"><h1>Modal Heading</h1></div>...',
windowClass: 'show',
...
If you are using an inline template as a script, you need to declare the template with a proper script tag. And, do NOT include the outer dialog container:
<script id="racesInsert.html" type="text/ng-template">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</script>
$modal.open({
templateUrl: 'racesInsert.html',
windowClass : 'show',
...
You did not mention which version of Angular UI Bootstrap you are using. The current version uses $uibModal not $modal as the imported module.

Here is the js function you need to call for modal-
$scope.functionName=function(){
var uibModalInstance = $uibModal.open({
animation: true,
templateUrl: 'html page path',
controller: 'controllerName',
size: 'lg',
resolve: {
deps: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'app Name',
insertBefore: '#ng_load_plugins_before',
files: ['js controller file path']
});
}]
}
});
uibModalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
});
}
Call the function functionName when you need to open the popup.
You need to add $uibModal as dependencies in current controller and the model controller should have $uibModalInstance as dependencies.

AngularJS with Foundation - Controller in Reveal Modal does not work

I have not much experience when it comes to use AngularJS, but I am not a newbie. Worked with it already a little bit.
However, I am using AngularJS with Zurb Foundation 6.
The Controller in my reveal Modal will not use any angular.
For example I can write {{hallo}} and he will not render it, he will show me {{hallo}} and not the value of this variable.
You have to know, that this modal is in a template file for angular, because I am using angular-route.
The strange thing is, that I am already using a modal in the index.html file and there angular in the modal works. But the modal in the template file (called dashboard.html) is not working.
That's my modal:
<div class="row">
<div class="columns large-12 medium-12 small-12" ng-controller="LoadAllUsers">
<button class="button" data-open="newUserModal" ng-click="load()">User hinzufügen</button>
<!-- newUserModal -->
<div class="tiny reveal" id="newUserModal" data-reveal>
<div class="large-12 medium-12 small-12 columns">
<div class="row">
<h4 class="text-center">User zur Miete hinzufügen</h4>
<br>
<label>Username oder Name des neuen Users eingeben</label>
<input type="text" placeholder="Max Mustermann" name="newuser" ng-model="userSearch" ng-change="search()">
<h5>Suchtreffer</h5>{{hallo}}
<button class="button" data-close>Abbrechen</button>
<button class="button float-right">User hinzufügen</button>
</div>
</div>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- /newUserModal -->
<button class="button">Miete zurückziehen</button>
</div>
</div>
</div>
My controller looks like this
routingApp.controller("LoadAllUsers", function($scope, $http) {
$scope.load = function() {
var allUsers = [];
$http({
method: 'GET',
url: 'someURL',
params: {parameters: "values"}
}).then(function successCallback(response) {
angular.forEach(response.data, function(value, key) {
allUsers[key] = {};
angular.forEach(value, function(subvalue, subkey) {
allUsers[key][subkey] = subvalue;
});
});
$scope.hallo = "AN";
console.log(allUsers);
}, function errorCallback(error) {
console.log(JSON.stringify(error.data));
});
};
$scope.search = function() {
console.log($scope.userSearch);
};
$scope.hallo = "HAAAAAAAAAAALLO";
});
I would appreciate, if anyone can help me.
Thanks

I found the solution: I hat to user Angular Foundation 6. What you have to know is that it is now currently under work, so it may be not as stable as Angular Foundation 5.
However, it helped me solving my problem.

Creating Directive for two views

I am trying to create a directive for two views. basically we have a modal, with header and footer. When we click on continue button in footer, the modal body should be alone changed displaying question 2 as a new view with header and footer fixed. How would i achieve this using directives?
Do i need to create individual directives for each view?
Here is my code
modal.html -
<section>
<header class="modal-header">
</header>
<div class="modal-body">
question 1
</div>
<footer>
<button>{{'BACK' | translate}}</button>
<button type="submit" ng-click="showQuestion(2)">{{'CONTINUE' | translate}}</button>
</footer>
</section>
directive.js
'use strict';
angular.module('OrderApp').directive('modalQuestions', [function () {
function getQuestions() {
return {
restrict: 'A',
templateUrl: 'modules/common/modals/modal.html',
scope: true
};
}
]);

It sounds like you may want to use the ngSwitch directive:
<section>
<header class="modal-header">
</header>
<div class="modal-body" ng-switch="questionNumber">
<div ng-switch-when="1">
question 1
</div>
<div ng-switch-when="2">
question 2
</div>
</div>
<footer>
<button>{{'BACK' | translate}}</button>
<button type="submit" ng-click="showQuestion(2)">{{'CONTINUE' | translate}}</button>
</footer>
</section>
Then on your controller:
$scope.questionNumber = 1;
$scope.showQuestion = function (questionNumber) {
$scope.questionNumber = questionNumber;
}
When $scope.questionNumber is updated, ngSwitch will change which of the divs it shows. Everything else on the page will remain the same.

Angular-ui bootstrap modal button will not execute function

I have my modal set up as so
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Confirm</h3>
</div>
<div class="modal-body">
<p>Are you sure you want to remove Two Factor Authentication from your profile?</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="removeSetting()">Yes</button>
<button class="btn btn-warning" ng-click="$dismiss()">Cancel</button>
</div>
</script>
Hitting the cancel button does what it should, simply closes the modal. My problem comes when a user hits the yes button. My function removeSetting() never gets executed.
$scope.removeSetting = function() {
TwoFactorAuthenticationService.removetAuthetication().then(function(data) {
$scope.busy3=false;
notifyService.alert("error", notifyService.getAlertText('2FactorRemovedToken'));
$scope.busy=true;
$timeout(function() {
$scope.templateUrl = 'twofactorsetup/step1.html';
}, 3000);
}, function() {
notifyService.alert("error", notifyService.getAlertText('2FactorRemoveTokenFailed'));
});
};
That is the function that should be called and executed. What am I missing?

Place code like this in modal initialize
$modal.open({
templateUrl: 'myModalContent.html',
scope: $scope,
controller: function($scope, $modalInstance) {
$scope.removeSetting = function() {
//place your code here or call function from parent scope
$scope.$parent.removeSetting();
$modalInstance.dismiss('cancel');
};
}
});
You don't need scope parameter if not using parent scope.
Or you can use call function from parent scope from template like this (by using $parent.removeSetting() call)
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Confirm</h3>
</div>
<div class="modal-body">
<p>Are you sure you want to remove Two Factor Authentication from your profile?</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="$parent.removeSetting()">Yes</button>
<button class="btn btn-warning" ng-click="$dismiss()">Cancel</button>
</div>
</script>

Angular bootstrap ui modal with same controller instead of new controller

I am using angular bootstrap ui modal box it says to give a new $modalInstance for new controller.I want to use the same controller where i have initialized the modal box.I searched but no success.I found this links but no success -
How to use the same controller for modal and non-modal form in Angular UI Bootstrap?
Angular-ui bootstrap modal without creating new controller
app.controller('UserCtrl',['$scope','$filter','ngTableParams','$modal',function($scope, $filter, ngTableParams,$modal) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl', //Instead of this i want to use the same controller 'UserCtrl'
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
} ]);
So that i can call the save function on this same controller which is called on save click of modal box

It was possible in older version of UI-Bootstrap 0.10.0
Download Library.Even latest version,it works for me
index.html
<!-- if you are using Bower -->
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js">
</script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js">
</script>
<!-- button click opens modal-->
<button ng-click="openModal()">Button test</button>
<!-- modal -->
<!-- look at 'type' and 'id' values -->
<script type="text/ng-template" id="myTestModal.tmpl.html">
<div class="modal-header">
<h3>Modal Header</h3>
</div>
<div class="modal-body">
<p>Modal Body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="close()" data-dismiss="modal">Close
</button>
<button type="button" class="btn btn-primary" ng-click="doSomething()">Do Something
</button>
</div>
</script>
modalDemoController.js
$scope.openModal=function(){
$scope.modalInstance=$modal.open({
templateUrl: 'myTestModal.tmpl.html',
scope:$scope
});
}
$scope.close=function(){
$scope.modalInstance.dismiss();//$scope.modalInstance.close() also works I think
};
$scope.doSomething=function(){
//any actions to take place
console.log("Do Something");
}

I had a similar issue, but I managed to fix it by removing the controller inside of the $uibModal.open({])