I trying to pop up a modal on page load. I can see the response and html in the firebug console but there is no popup thats displayed.
Installed ui-bootstrap
Added in the app.js
angular.module('sample', ['ui.router','angular-clipboard','ui.bootstrap'])
Modal.html
<div id="modal" class="bx--modal" tabindex="-1">
<div class="bx--modal-container">
<div class="bx--modal-content">
<div class="bx--modal-header">
<button class="bx--modal-close" type="button" data-modal-close>X</button>
<h4 class="bx--modal-header__heading">Subscribe our Newsletter</h4>
</div>
</div>
</div>
Controller.js
$scope.myDialog = function () {
$modal.open({
templateUrl: 's***/p*/v**/p**/modal.html',
backdrop: 'static',
windowClass: 'modal',
size: 'lg',
controller: function ($scope, $modalInstance) {
$scope.cancel = function () {
$modalInstance.dismiss();
};
}
});
};
Called the function in html page on whose load I want a modal popup to be displayed automatically as:
<span ng-init="myDialog()"></span>
There are no errors in firebug console. I can see the modal.html in the response and also the page in HTML. But there is no popup.
The pop up doesnt show on page load even though the modal.html is fetched properly. Where am I doing wrong? Or is there a better way to load a modal automatically on page load?
Related
I'm very new to angularjs and currently studying mean stack. I'm using this code to open an html page then getting the id of clicked user.
<a href="/edit/{{ person._id }}">
<button type="button" ng-show="management.editAccess" class="btn btn-primary">Edit</button>
</a>
But I want to open my html as a modal, I tried this method here http://plnkr.co/edit/Y7jDj2hORWmJ95c96qoG?p=preview but it doesn't show the html, Please help me on how to open my whole html as modal.
You need to $http.get the template in html and then using $sce render it.
<button data-toggle="modal" data-target="#theModal" ng-click="get()">get</button>
<div id="theModal" class="modal fade text-center">
<div class="modal-dialog">
<div class="modal-content">
<div ng-bind-html="trustedHtml"></div>
</div>
</div>
</div>
JS:
$scope.get = function() {
$http({
method: 'GET',
url: 'Lab6.html',
})
.then(function successCallback(data){
$scope.data = data.data;
console.log($scope.data);
$scope.trustedHtml = $sce.trustAsHtml($scope.data);
},
function errorCallback(response){
console.log(response);
console.log('error');
});
}
Here is working plunker: http://plnkr.co/edit/SdCAep1dDH8UcpprwDH6?p=preview
Also I would argue that you should probably be using Angular UI Bootstrap to create your modal dialogs http://angular-ui.github.io/bootstrap/
Here is a cut down version of how to open a modal using Angular UI Bootrstrap:
$scope.open = function (vehicle) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
resolve: {
items: function () {
return $scope.items;
}
}
});
};
I am using ngDialog module for angularjs. My problem is that when I make a action at modal windows, I hope that my interface change depending of scope changes, but ng-if or ng-show or simply print variable not update. If I print in console I can see the rules values, but the interface not update.
My Code:
controller:
export class NewEntityController {
constructor($scope, $routeParams, $location, ngDialog) {
"ngInject";
// initialize scope
$scope.ruleForm = false;
$scope.rules = [];
$scope.showRulesSetting = function()
{
ngDialog.open({ template: 'views/modal-windows/rules.html', className: 'ngdialog-theme-default', scope: $scope });
};
$scope.addRule = function()
{
$scope.rules.push('rule-'+new Date().getTime());
console.log($scope.rules);
}
}}
Normal Page View:
<span style="color: blue;" ng-click="showRulesSetting()"><i class="fa fa-cog" aria-hidden="true"></i> Advance rules</span>
Modal Windows View:
<div>
<button ng-click="addRule()">Add</button>
</div>
<div id="ruleslist" ng-if="rules.length > 0">
{{rules}}
</div>
When I click in "Add" button I can see rules value in console, but in interface div with id="ruleslits" never show and the result of {{rules}} is always []. I test with $scope.$apply() but whithout result.
I am using Angular bootsrap modal service. version of ui-bootstrap is angular-ui-bootstrap 1.3.3. below is my code.
First on module , I have registered correctly.
var angularFormsApp = angular.module("angularFormsApp", ["ngRoute", "ui.bootstrap"]);
then on angular controller , I have injected this directive correctly.
var loginController = function ($scope, $window, $routeParams, $uibModal, DataService)
then I am calling this modal by following code inside same controller
var onError = function (reason) {
$scope.modalOptions.headerText = "Error";
$scope.modalOptions.bodyText = reason.statusText;
$uibModal.open({
templateUrl: baseurl + 'app/ErrorMessages/PopUpErrorMessage.html',
controller: 'loginController'
});
};
$scope.cancelForm = function () {
$uibModalInstance.dismiss('cancel');
};
Now as you can see I have created separate html file for modal and below is html
<div class="modal-header">
<h3>{{modalOptions.headerText}}</h3>
</div>
<div class="modal-body">
<p>{{modalOptions.bodyText}}</p>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" value="Close"
ng-click="cancelForm()" />
</div>
Now till here everything is working , I mean on error method , modal is showing but problem is its showing blank , even nothing happening on close button click.
There is no error in console of chrome browser. Here is screen shot.
Your Modal does not know about your controller's scope. Try changing to this:
$uibModal.open({
templateUrl: baseurl + 'app/ErrorMessages/PopUpErrorMessage.html',
scope: $scope
});
To use your current controller variables try to change
controller: 'loginController' to scope: $scope. It will pass current scope to the modal.
Similar problem was here: AngularJS passing data to bootstrap modal
I'm a newby in AngularJS and maybe I'm missing something stupid but I cannot get my ionic modal work out. I need that a modal open up when I click the share button, but I get in console Error: $scope.modal is undefined. I'm not sure why. This is my code right now. Any help will be apreciated.
modal.html
<ion-modal-view>
<ion-header-bar>
<h1 class="title">My Modal title</h1>
</ion-header-bar>
<ion-content>
Hello!
</ion-content>
</ion-modal-view>
members.html (This is where I have my share button)
<ion-nav-buttons side="secondary">
<button class="button button-clear" ng-click="openModal()">
<span class="share-button">Share</span>
</button>
</ion-nav-buttons>
controller.js
.controller('MembersCtrl', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
})
If your modal.html is stored in a templates folder, can you try adding templates/ or whatever the path is:
$ionicModal.fromTemplateUrl('templates/modal.html', {
Following this plunker: http://plnkr.co/edit/33572YOSA2s89uEiLmKB?p=preview
I've managed to load into bootstrap modal partial content based on route:
Route defined as follows:
.when('/profile', {
templateUrl: 'modalContainer',
})
Controller hooked up:
myApp.controller('DashboardModal', function($scope, $modal) {
$modal.open({
templateUrl : 'Partials/Dashboard.html',
controller: 'DashboardController',
});
});
Finally in html:
<div>
Click here to open modal!
</div>
<script type="text/ng-template" id="modalContainer">
<div ng-controller="DashboardModal"></div>
</script>
My Problem is that the route of the opener window changes when modal opens.
The code is working exactly as designed. What the <a href="#/profile"> tag is doing is making a call to the $routeProvider with the path '/profile'. Looking in the script.js, you can see this is a new view which is set up to look like a modal in the HTML. You are navigating to a new view, not opening a modal.