I am very new to creating AngularJs directive , so below i have created directive and when user click on delete button i am checking what are the values of scope,element and attrs but its not printing anything in console. ProcessDTO is the json data in the controller.
Any idea what i am missing here, i have read the directive documentation but if someone can put some light and explain it as beginner level it would be great.
html
<button class="btn btn-danger"
type="button" autodelete delete-tags="processDTO">Delete</button>
directive.js
angular.module('App').directive('autoDelete', function () {
'use strict';
return{
restrict:'A',
scope:{
autoDeleteTags: '=deleteTags'
},
link:function(scope,element,attr){
$(element).click(function(){
console.log('Element',element);
console.log('SCOPE',scope);
console.log('ATTRS',attr);
})
}
}
});
The directive named autoDelete is looking for attribute auto-delete not autodelete
Try:
<button class="btn btn-danger"
type="button" auto-delete delete-tags="processDTO">Delete</button>
Also would suggest using ng-click instead of creating your own event handlers
Related
I'm new to AngularJS. I'm converting some pages to AngularJS. I just displayed rows of information. However I'm having trouble converting the button onclick part to AngularJS. Can someone please help me. Below is the code that I'm working with.
<div ng-repeat="i in data">
<p>{{i.name}}</p>
<button class="btn btn-xs btn-default" data-toggle="modal" data-target=".show-ticket-details-modal" onclick="show_details(10)">
<i class="fa fa-info"></i>
</button>
</div>
Just pass the model to show_details method
show_details(i)
Regards,
Try using ng-click (https://docs.angularjs.org/api/ng/directive/ngClick). This runs a function in your angular controller when you click an element. All you've got to do is add the ng-click directive to your element, and then build a function with the same name in your angular controller to handle the data.
IE, replace onclick="show_details(10)" with: ng-click="show_details(10)".
Then, in your controller, build a function with the same name that will handle the data show_details(10), like:
$scope.show_details = function(index) {
console.log(index); // will log 10 in the example above
// do stuff with your index here,
// pass data to your angular factory, etc.
};
Note: For <form> elements, you can use the ng-submit directive instead (https://docs.angularjs.org/api/ng/directive/ngSubmit). Just use ng-submit="someFunction()" instead of ng-click.
Another Idea:
Instead of passing in the number 10, you could also use track by $index (https://docs.angularjs.org/api/ng/directive/ngRepeat#), for example, in your ng-repeat, you could:
ng-repeat="i in data track by $index"
Now, you can actually just pass $index into your ng-click function, instead of the number 10:
ng-click="show_details($index)" // $index will be 10, if the index of `i` was 10 in `data`
Hope this helps somewhat, let me know if you have any questions! The links included show more examples of their usage!
At my view I have a list of items:
<li ng-repeat="fruit in items">
{{fruit.name}} / {{fruit.price}}
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">EDIT</button>
</li>
And I'd like to edit each product using bootstrap modal. That's why I need to pass data of specific product to modal. After this I'll simply pass this data to angular script using ng-click="saveFruit(dataFruit)" and saveFruit will save data.
Here is my fiddle:
http://jsfiddle.net/czus6s3a/
EDIT: Changed answer entirely.
Click here for a working fiddle: http://jsfiddle.net/sn8u7kqe/1/.
Changes made:
In the controller, I created a $scope.dataFruit = null, just to ensure the variable is initialized. I also created a function as follows:
$scope.setDataFruit = function(fruit) {
$scope.dataFruit = fruit;
};
This was to ensure that we were assigning our fruit to the right $scope.
Finally, I had you move your <div class="modal"> to INSIDE the div which had the ng-controller directive.
The controller will only apply it's model (variables, and functions, etc), to the elements that it has visibility of. As per your original example, the modal was OUTSIDE of the div, so the data binding would not have applied there.
I'm trying to make a directive element that will take an array of json objects and create a series of buttons. To start with, I thought I would try to get working with just a left and a right button. Here's how I'm trying to use it
<div ng-controller="FormCtrl as form">
<buttongroup
left-func="form.cancel()" left-text="Reject Call"
right-func="form.submit()" right-text="Accept Call">
</buttongroup>
</div>
And heres the directive code
.directive('buttongroup', function() {
return {
restrict: 'E',
scope: {
leftFunc: '#',
leftText: '#',
rightFunc: '#',
rightText: '#'
},
template: '<button type="button" ng-click="{{leftFunc}}">{{leftText}}</button><button type="button" ng-click="{{rightFunc}}">{{rightText}}</button>',
};
});
This creates the correct html but the ng-click does not work on the buttons. I'm assuming this is because they are in the directive's template scope and are unable to access the FormCtrl functions as form.submit or form.cancel.
I'm brand new to angular and still trying to figure out how the scoping works so any help would be appreciated.
You want to invoke the function thus you need to call it.
You have a syntax error in your template. It must be like this:
Notice how I used the ng-click directive
template: '<button type="button" ng-click="leftFunc()">{{leftText}}</button><button type="button" ng-click="rightFunc()">{{rightText}}</button>'
I am trying to use an AngularJS $scope as an HTML attribute rather than viewable text.
main.js
var myApp = angular.module('myApp');
myApp.controller("buttonCtrl", ['$scope', function($scope){
$scope.johnny = [
{quote: 'Anything for My Princess', controller: 'Princess'}
];
}]);
page1.html
<button ng-repeat="button in johnny"
ng-class="dynamic"
class="topcoat-button"
ng-controller="{{button.controller}}" <---- this is what does not work
ng-click="play()">
{{button.quote}}
</button>
How can I fix this so I can add these variables as an attribute value.
Thanks
Angular.js is a bit weird when doing this, but this should work. Also you're using ng-repeat wrong, but it's fixed below.
<button ng-repeat="johnny in buttons"
ng-class="dynamic"
class="topcoat-button"
ng-controller="this.johnny.controller"
ng-click="play()">
{{johnny.quote}}
</button>
I am building an angularJS app using ng-repeat and ng-click on the same element.
I have an array of items which I run through to create a list of buttons. Each one of these items has a property category which I'd like to pass as an argument for an ng-click action.
So far I have used the following code:
<button type="button" class="btn btn-default" ng-repeat="job in jobs" ng-click="filterJobListings(job.category)">
{{ job.category }}
</button>
However, the generated HTML is as follows:
<button type="button" class="btn btn-default ng-scope ng-binding" ng-repeat="job in jobs" ng-click="filterJobListings(job.category)">Design</button>
How can I pass the argument correctly here?
Thanks a lot,
Cheers
EDIT
I was wrong, ng-click="filterJobListings({{job.category}})" is not the solution
I believe you're doing it correctly. This could be an issue with prototypical inheritance. Remember, that ng-repeat creates its own scopes that might not apply their changes to the parent scope(s).
See my fiddle that works. Notice I'm using and object to store the selected category $scope.obj.cat=i;. It wouldn't work if I used a primitive.
http://jsfiddle.net/nicolasmoise/hwH64/