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
Related
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?
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 currently creating an app that has a nav bar. I want a particular function to be invoked every time the submit button in the nav bar is pressed regardless of route/view. I am having trouble because here in my routes file I have created associations that changed based on route. The form is found in <form class="pure-form" ng-submit="somefunc()">
routes.js
angular.module('LiveAPP', ['ngRoute',
'LiveAPP.main',
'LiveAPP.signUp',
'LiveAPP.artist'])
.config(function($routeProvider, $httpProvider) {
$routeProvider
.when('/', {
templateUrl : '/home.html',
controller : 'mainCtrl'
})
.when('/signup',{
templateUrl : '/signup.html',
controller : 'signUpCtrl'
})
.when('/artist',{
templateUrl : '/artistpage.html',
controller : 'artistCtrl'
})
})
index.html
<body ng-app='LiveAPP'>
<div class="header">
<form class="pure-form" ng-submit="somefunc(field)">
<input ng-model="field" type="text" placeholder="Artist" name="field">
<button type="submit">Search</button>
</form>
Sign Up
artistPage
</div>
<div ng-view></div>
</body>
mainCtrl
angular.module('LiveAPP.main',[])
.controller('mainCtrl', ['$scope','$http', '$location',mainCtrl]);
function mainCtrl($scope,$http,$location){
$scope.somefunc = function(searchvalue){
console.log(searchvalue)
}
};
Right now the submit button is associated with the mainCtrl which is related to the home.html. Any ideas?
In general you have a couple approaches:
If you need some logic to be available in more than one controller you can create a service and inject it to your controllers.
You can implement controller inheritance.
There are a couple ways to implement controller inheritance.
This is one example of how to do that:
var app = angular.module('myApp', []);
app.controller('MainCtrl', function() {
this.methodclick=function(){
alert('I am Parents')
}
});
app.controller('ChildCtrl', function($controller) {
var ChildCtrl=this;
ChildCtrl.child = $controller('MainCtrl',{});
});
But in my opinion it is better to implement a service.
I have a modal popup on my page. The modal popup use bootstrap angular library.
Inside the body of the modal I have a text box with ng-model attribute, and on the press of ok button I want to use that text box value.
<input type="text" data-ng-model="ProjectName" class="form-control" tab-index="1" required />
But when I log the value to console, I dont get that value.
$scope.ok = function () {
console.log($scope.ProjectName);
};
I have created a plunkr link for debugging this. Please advice.
You have a number of issues.
Firstly, you didn't define the scope property on the modal. By default, the scope is set as child of the $rootScope.
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
size: size,
scope: $scope,
resolve: {
}
});
Secondly, you should set the ng-model to be the property of an object, otherwise angular will automatically create the property for you on the child scope.
Controller
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.model = {};
...
}
Markup
<div class="modal-body">
<input type="text" ng-model="model.ProjectName" />
</div>
See this plunkr for working sample: http://plnkr.co/tbVHl27D2pXia19kOjob
I am having a very troubling problem where ng-click updates the expected scope variables, the scope variables appear to change on the DOM ( when viewed via the chrome debugger) but the dom elements that have changed are not redrawn in the browser. I have noticed across multiple browsers and devices BUT ONLY WHEN THE SCREEN WIDTH IS BELOW 768. I am using angular version 1.2.6. Has anyone come across this type of issue??
I have simplified the code to try to isolate and confirm what is happening. Here is the code in its simplified version:
First the view:
<section class="stream-area">
<div class="group">
<div class="gw-fixed-top-panel">
<div class="group-heading ">
<div class="panel-title">
<span class="fleft name" ng-click="usergroup.collapsed=!usergroup.collapsed"> CLICK HERE </span>
<a ng-show="usergroup.collapsed" title="Click to edit group" ><i class="fa fa-cog"></i></a>
<a ng-hide="usergroup.collapsed" title="Click to edit group" ><i class="fa fa-chevron-up"></i></a>
<div> {{usergroup.collapsed}}</div>
</div>
</div>
</div>
</div>
</section>
The controller does nothing at this point...
'use strict';
(function () {
var groupController = function($scope) {
$scope.usergroup={};
$scope.usergroup.collapsed=true;
};
myOverall.myApp.controller('GroupController',['$scope', groupController]);
}());
The controller is invoked by via .config:
(function () {
golfWire.gwWebApp =angular.module('gwWebApp', [
'ngRoute',
'ngAnimate',
'ngResource',
'ui.bootstrap',
'firebase',
'LocalStorageModule',
'ngGrid'
]);
myOverall.myApp
.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/group/view', {
controller: 'GroupController',
templateUrl: '/app/views/group.html'
})
.otherwise({
redirectTo: '/main'
});
/* $locationProvider.html5Mode(true); */
}]);
Add this function in your controller
$scope.toggleUserGroup = function(){
$scope.usergroup.collapsed = ! $scope.usergroup.collapsed;
$scope.$apply();
}
Call this function on ng-click. This should get the DOM updated and refreshed.
Reasoning: By calling $apply() you trigger a digest() cycle, which checks for changed expression and repaints the DOM if need be.
Incase this doesn't fix the issue, please provide a plunkr/fiddle. Would be happy to get some working code.
Thanks,
A slight variation on Eliel's answer in AngularJS - bind to directive resize worked for me. In the directive.js:
$scope.onResizeFunction = function() {
};
// Call to the function when the page is first loaded
$scope.onResizeFunction();
angular.element($(window)).bind('resize', function() {
$scope.onResizeFunction();
$scope.$apply();
});
I call
$(window).resize();
from within my app.js. The directive's d3 chart now resizes to fill the container.