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
Related
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 have problem trying to change $rootScope inside modal controller, The rootscope change but not immediately reflect in the view until i refresh page.
here is my code:
.controller('LoginController',function($scope,$rootScope,$modalInstance){
$scope.close = function(){
$rootScope.authentication = true;
}
});
and the code to open modal in other controller:
controller('myCtrl',function($scope,$modal){
$scope.openLoginModal = function(){
$scope.loginMdl= $modal.open({
templateUrl:'myview/myloginform.html',
controller:'LoginController'
});
$scope.loginMdl.result.then(
function(){},
function(){}
);
}
});
Finally, the simple HTML to open login modal;
<div ng-controller='myCtrl'>
<button ng-click='openLoginModal()'>Login </button>
</div>
<div>
<p ng-show='authentication'> USER HAS LOGGED IN</p>
</div>
as you can see, I have change the "authentication" var of $rootScope, but the change is not reflected immediately in the html view.
Could have some advise pls.
try
$rootScope.$apply();
to get the the change in rootscope applied you have to use the above code.
I have a plunk at http://plnkr.co/PF7cRQE4n5lYube8oa3t
The templateUrl points to control.html with the following code.
hello from Directive
<br />{{message}}
<br />
<input type="checkbox" {{checkedstatus}} />
<br />Value of Checked Status = {{checkedstatus}}
My controller and directive is as follows...
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
})
.directive('myDir', function() {
var linkFunction = function(scope, element, attributes){
scope.message = "The check box should be checked... no?";
scope.checkedstatus = "checked";
}
return {
restrict: 'E',
templateUrl: "control.html",
link: linkFunction,
scope: {}
};
})
My index.html file is straight forward and is using the directive...
<my-dir></my-dir>
I was assuming that if checkedstatus is set to "checked" I will see the checkbox as checked in the UI. But it doesn't happen that way and remains unchecked. My goal is to use this Checkbox as a toggle button to view or hide certain elements of my view.
you can use ng-checked
scope.checkbox={
checkedstatus:true
};
<input type="checkbox" ng-checked="checkbox.checkedstatus" />
Or you can bind model
like this
<input type="checkbox" ng-model="checkbox.checkedstatus" />
Check on plunkr
http://plnkr.co/edit/qkWyqrLBwYKv1ECZ0WHE?p=preview
When I populate an input field from within a directive, it shows on the DOM, but $scope is not capturing the value. How do I fix it so that $scope captures the new info?
How to reproduce the behaviour from my Fiddle:
Click Fill with Directive
Click Log
--> $scope.input val is undefined
Fill input with 'asdf'
Click Log
--> $scope.input val is 'asdf'
Fill input with 'abcd'
Click Fill with Directive
--> DOM shows 'quick brown fox'
Click Log
--> $scope.input val is 'abcd'
My code is here: JSFiddle
JS:
'use strict';
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
$scope.logResult = function(){
console.log($scope.input);
}
});
app.directive('fillInput', function(){
return {
link: function($scope, elem){
$scope.fillFormDirective = function() {
console.log(elem);
elem.val('quick brown fox');
}
}
};
});
HTML:
<div ng-controller='myCtrl'>
<div>
<input type="text" ng-model="input.weird" id="inputField" fill-input />
</div>
<div>
<button ng-click="fillFormDirective()" >Fill With Directive</button>
</div>
<div>
<button ng-click="logResult()">Log Result</button>
</div>
</div>
There is a problem with the code you posted:
In your link function your scope should be scope NOT $scope.
If you want 2 way binding between you controller and the directive, you need to pass in a variable through an isolate scope. However with an isolate scope the fillFormDirective() method won't be called if it is declared on elements that don't have the fill-input directive on them.
Try this:
app.directive('fillInput', function(){
return {
scope:{
fillInput:'='
}
link: function(scope, elem){
elem.val(scope.fillInput);
elem.bind("click", function(e){
console.log(elem);
elem.val('quick brown fox');
});
}
};
});
And your HTML:
<input type="button" fill-input="text" />
See working plunk.
EDIT I've updated the plunk to not make use of an isolate scope.
Solution from this SO thread:
Update Angular model after setting input value with jQuery
Working Plunkr:
http://plnkr.co/edit/QKDaHT3CllyBtrRPdYUr?p=preview
Basically, quoting #Stewie,
ngModel listens for "input" event, so to "fix" your code you'd need to trigger that event after setting the value:
elem.bind("click", function(e){
console.log(elem);
newElem.val('quick brown fox');
newElem.triggerHandler('input'); <-----This line of code fixed the problem
});