i have here an input button where i want to set its message using a template.At first, when i clicked the button it should run a function which will set scope.info value to info, and then the modal should popup containing the template which has the two way binding. but the binding is not working
Code:
index.html
<input
type="button"
name="name"
value="New"
ng-click="verify()"
ng-bootbox-title="Warning"
ng-bootbox-custom-dialog
ng-bootbox-custom-dialog-template="temp.html"
ng-bootbox-buttons="customDialogButtons"
ng-bootbox-class-name="some-class" />
temp.html
<div>{{info}}</div>
prog.js
$scope.verify = function(){
$scope.infos= "info";
};
SOLVED!
SOLUTION:
prog.js
$scope.verify = function(){
$rootScope.infos= "info";
};
Your code works correctly, you just miss spelled the name of your variable ({{infos}}) in your div.
JSFiddle working.
Update from comments
Try to put infos value in $rootScope instead of $scope, it seems you have an issue of accessibility.
Related
My view has
<input type="checkbox" class="check_box" ng-model="campaign.paused"
ng-click="CampaignPauseClicked(campaign, $event)" />
<p>campaign.paused == {{campaign.paused}}</p>
with the <p> being for debugging. It shows false, as it shoudl, given the data, but in the controller
$scope.CampaignPauseClicked = function(campaign, $event)
{
campaign.paused = ! campaign.paused;
when I breakpoint on the first code line, the value of campaign.paused is true (!).
I have searched the code and campaign.paused is not being written elsewhere.
Any idea what could be happening here?
[Update] I am using an ng-click fucntion, which I have not shown in its entirity, because I need it to "swallow" the $event and prevent it from propogating to the parent.
That's because ng-model is updating the value when you click the checkbox. You're undoing what Angular is doing for you.
If you want to do it by yourself in your $scope.CampaignPauseClicked function, remove the ng-model part from the html.
Otherwise, you can let Angular do its thing, leave the ng-model="campaign.paused" clause, and remove the first line from your ng-click callback.
Also you can replace the ng-click with the ng-change directive since you are using a checkbox.
ng-change will run everytime the checkbox state is changed (checked/unchecked)
<input type="checkbox" class="check_box" ng-model="campaign.paused"
ng-change="CampaignPauseChanged ($event)" />
<p>campaign.paused == {{campaign.paused}}</p>
And in your controller:
$scope.CampaignPauseChanged = function(event)
{
console.log(campaign.paused)
console.log(event)
}
Another option would be the ng-checked directive here is an example in this plunker. As you can clearly see the checkbox model returns true only if it is checked.
Question related to forms-angular project.
Preamble
The default formInput directive of forms-angular can be override by a custom directive by specifying the form.directive property in an extended mongoose model,
var CategorySchema = new Schema({
name: String,
});
var PlansSchema = new Schema({
categories: {
type: [CategorySchema],
form: {
directive: 'plan-categories'
}
}
});
The custom plan-categories directive has a template where fields of [CategorySchema] can be edited.
What is working
Let's start with a first simple template:
<div>
<div ng-repeat="category in record.categories">
<input ng-model="category.name" />
</div>
</div>
Forms-angular can successfully detect changes in these custom plan-categories directive input fields bound to data (injected scope.record). In particular when changing the user changes the value of the above input fields, the "Save" button of the page is enabled, allowing the Save operation.
The activation of the Save button thanks to the following comparison in parent formInput's BaseCtrl scope false === $scope[$scope.topLevelFormName].$pristine (see base.js).
Not working
Now, the Save button doesn't get enabled, when changing the category.name variable with an expression or a function called by ng-click, as below:
<div>
<div ng-repeat="category in record.categories">
<input ng-model="category.name" />
<button ng-click="category.name = 'Hello'">Edit</button>
</div>
</div>
On button click, the category.name variable seems to be correctly changed, since the value in the input is changed accordingly. Unfortunately, the Save button stays disabled.
Note: I also unsuccessfully tried to pass to ng-click a method (from the scope injected in the link method of the custom directive) and setting the category.name variable in a $timeout call.
I guess the ng-model directive of the input field calls parent's (multi-ancestor?) $setDirty() method.
Question
how do I magically get $setDirty() called by forms-angular in order to enable the "Save" button
If it is not possible:
how do I access BaseCtrl scope and call $setDirty() when changing the record.categories elements?
Offhand I cannot think of a magical solution, but the decidedly non-magical way is to depend on $data.baseScope (see https://github.com/forms-angular/forms-angular/blob/master/js/controllers/base.js#L12) which saves going through lots of $parents.
I have a problem with Kendo UI controls
My HTML
<input type="text" ng-model="record.name" kendo-numeric-text-box />
<input type="text" ng-model="record.name"> </input>
<button ng-click="resetRecord()" >test bind</button>
My test.js
$scope.record ={};
$scope.resetRecord= function(){
$scope.record = {};
}
Well, when I execute the function resetRecord just the standard input clear, the kendo ui input does not clear, I've tried $scope.record =null and it does not work either.
if I change to code below, it works, but I need it works like above
$scope.resetRecord= function(){
$scope.record. name = null;
}
it happens with all input Kendo UI, not just kendo-numeric-text-box
if there is a way to iterate with record object, discovering all the "properties", such as name it will work for me.
My intention is just have one controller for all CRUD screen of the system, I wouldn't like to write one controller with model definition for each entity of the system.
is it a bug?
UPDATED - SOLVED
Solution 1
As runTarm said in solution 2.
for (prop in $scope.model.record) {
$scope.model.record[prop]='';
}
Solution 2
Just add the attribute k-rebind to the Kendo UI controls and it will update it's content according ng-model.
input type="text" ng-model="record.name" k-rebind="record.name" kendo-numeric-text-box />
This is not a bug, but a common issue due to the Prototypal Inheritance characteristic of JavaScript Object. I would recommend reading Understanding-Scopes for more detail.
You could avoid the problem by storing the record in another object, instead of in $scope directly. For example:
$scope.model = {};
$scope.model.record = {};
$scope.resetRecord = function() {
$scope.model.record = {};
}
Also change your ng-model:
<input type="text" ng-model="model.record.name" kendo-numeric-text-box />
<input type="text" ng-model="model.record.name"> </input>
<button ng-click="resetRecord()" >test bind</button>
Or if you wouldn't want to add the extra model., an alternative solution is what you have mentioned.
You could iterate over object's properties and delete them all like this:
for (prop in $scope.record) {
delete $scope.record[prop];
}
Hope this helps.
I have a form that is managed with AngularJS.
I use on ng-repeat dropdonw list to update a hidden field value.
Everything works fine until I use chrome and submit the code and then do a
"page return/Go back one page"
If i try to use the dropdonw list again it only updates the modal value in a print statement not the value of the hidden input.
<input type="hidden" name="postageId" value="{{intPostageId}}" ng-model="intPostageId" />{{intPostageId}}
{{intPostageId}} outside the input works, but the one inside doesn't update
Much appreciated
For some reason angular doesn't update hidden input values with ng-model. You will have to do a quite directive to get this to work.
You don't need the value binding you have ng-model will be enough.
module.directive('updateHidden', function () {
return function (scope, el, attr) {
var model = attr.ngModel;
scope.$watch(model, function (val) {
el.val(val);
});
};
});
I came across this problem myself. No idea why this happens but and an easy workaround I found for this is to just swap the hidden field for a text field with display:none
<input type="text" name="postageId" value="{{intPostageId}}" style="display:none">
I am trying to bind a checkbox to scope using ng-model. The checkbox's initial state corresponds to the scope model just fine, but when I check/uncheck the checkbox, the model does not change. Some things to note is that the template is dynamically loaded at runtime using ng-include
app.controller "OrdersController", ($scope, $http, $location, $state, $stateParams, Order) ->
$scope.billing_is_shipping = false
$scope.bind_billing_to_shipping = ->
console.log $scope.billing_is_shipping
<input type="checkbox" ng-model="billing_is_shipping"/>
When I check the box the console logs false, when I uncheck the box, the console again logs false. I also have an order model on the scope, and if I change the checkbox's model to be order.billing_is_shipping, it works fine
I struggled with this problem for a while. What worked was to bind the input to an object instead of a primitive.
<!-- Partial -->
<input type="checkbox" ng-model="someObject.someProperty"> Check Me!
// Controller
$scope.someObject.someProperty = false
If the template is loaded using ng-include, you need to use $parent to access the model defined in the parent scope since ng-include if you want to update by clicking on the checkbox.
<div ng-app ng-controller="Ctrl">
<div ng-include src="'template.html'"></div>
</div>
<script type="text/ng-template" id="template.html">
<input type="checkbox" ng-model="$parent.billing_is_shipping" ng-change="checked()"/>
</script>
function Ctrl($scope) {
$scope.billing_is_shipping = true;
$scope.checked = function(){
console.log($scope.billing_is_shipping);
}
}
DEMO
In my directive (in the link function) I had created scope variable success like this:
link: function(scope, element, attrs) {
"use strict";
scope.success = false;
And in the scope template included input tag like:
<input type="checkbox" ng-model="success">
This did not work.
In the end I changed my scope variable to look like this:
link: function(scope, element, attrs) {
"use strict";
scope.outcome = {
success : false
};
And my input tag to look like this:
<input type="checkbox" ng-model="outcome.success">
It now works as expected. I knew an explanation for this, but forgot, maybe someone will fill it in for me. :)
Expanding on Matt's answer, please see this Egghead.io video that addresses this very issue and provides an explanation for: Why binding properties directly to $scope can cause issues
see: https://groups.google.com/forum/#!topic/angular/7Nd_me5YrHU
Usually this is due to another directive in-between your ng-controller
and your input that is creating a new scope. When the select writes
out it value, it will write it up to the most recent scope, so it
would write it to this scope rather than the parent that is further
away.
The best practice is to never bind directly to a variable on the scope
in an ng-model, this is also known as always including a "dot" in
your ngmodel.