I am trying to access html data attribute within my angular controller but keep getting 'null' returned even though the attribute is actually set dynamically in the html: here is the code:
<button class="btn" ng-data-stuff="{{psn._id}}" ng-click="person.doStuff($event.target)">
Follow
</button>
self.doStuff = function (e) {
$window.alert(e.attributes('data-stuff'))
}
There is nothing named ng-data-stuff attribute in a button, instead you can directly pass the psn value to the button function as follows,
<button class="btn" ng-click="person.doStuff(psn)">Follow </button>
and inside the function,
self.doStuff = function (e) {
$window.alert(e._id);
)
Related
This is reset function to reset form:
$scope.resetForm = function(formData,formName) {
$scope.formData = {};
$scope.formName.$setPristine();
}
I am calling this function on reset button for multiple forms. using this code:
<button type="reset" class="btn btn-default btn btn-primary"
data-ng-click="resetForm(updateAddressData,updateAddressForm)">Reset</button>
Showing an error:
Cannot read property '$setPristine' of undefined
at a.$$ChildScope.$$ChildScope.$scope.resetForm
In your code function(formData,formName) you are passing the formData and form, so you are passing the reference here.
And therefore you do not have to use $scope, you can access them directly.
Use formData = {}; formName.$setPristine();
My scope does not contain an "notYetExistingArray" at the time of generation.
Via a button, I would like to add the array plus a first entry to it.
Each subsequent push of the same button should then add another entry.
Unfortunately, I have no clue on how to approach it.
Currently I have:
<button type="button" ng-click="notYetExistingArray.unshift({})">
If the scope already contains an object "notYetExistingArray" of type array = [] I can easily add an entry with above function.
Any advise on how to do it?
Call a controller function from your ng-click directive rather than trying to do all that stuff in your markup. It can include a check for the existence of the array, and create it if needed.
<button type="button" ng-click="addThis(thing)">
In the controller:
ctrl.addThis = function(thing) {
if (ctrl.myArray === undefined) {
ctrl.myArray = [];
}
myArray.unshift(thing);
};
Note that I'm using controllerAs syntax here, so ctrl might be $scope instead.
You can initialize the array before doing that, for example:
<button type="button" ng-init="notYetExistingArray=[]" ng-click="notYetExistingArray.unshift({})">
check the documentation for ng-init https://docs.angularjs.org/api/ng/directive/ngInit
A good way is to bind a function on the ngClick directive, which will perform a test in order to check if the array exist.
In your controller :
function foo(item) {
//if my array does not exist
if (!$scope.myArray) {
//create the array
$scope.myArray = [];
}
//Here, we can add some data to our array, we are sure that the array exist
$scope.myArray.unshift(item);
}
$scope.foo = foo;
Html :
<h2>Array.length : {{myArray.length}}</h2>
</br>
<button type="button" ng-click="foo({})">Add</button>
Feel free to check the Working Plunker
I got this directive which renders a list of objects. this objects got it's own function, i wanna bind it to a button. So i run over my items.In my objects value, i got a prop called Action which value is a function. i then try to add it to the html string, then i say it should be trusted as html. like shown below
angular.forEach(data.Items, function (value, key) {
var buttonsCode = "";
buttonsCode += '<div class="btn btn-sm" ng-click="' + value.Action + '">Test</div>';
value["buttons"] = $sce.trustAsHtml(buttonsCode);
});
but when i try to run it, it looks like this
<div class="btn btn-sm" ng-click="function () {
alert("test of funtion"); }">Test</div>
Anyone know how i can do this?
I am trying to pass an angular variable into a function click call.
this is what im trying to do so far:
<button onclick="dialogBox(id)">Cancel</button>
$scope.dialogBox = function (id) {
console.log('Succesfully submitted id: '+id);
});
onclick is a normal JavaScript event binder instead of an Angular one. You need to use global variables/functions in the onclick expression. However, in your code, dialogBox() is a function of $scope. So, if your button tag is wrapped inside the corresponding controller, just use ng-click instead. Like:
<button ng-click="dialogBox(id)">Cancel</button>
ng-click is the to slove this problem
<button ng-click="dialogBox(id)">Cancel</button>
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.