Attempting to generate a query object when clicking on different buttons by passing attributes in the HTML called "attr-{{foo}}" that are derived from an ng-repeat or other methods. I intended for the controller to first check if the element has all the attributes that correspond to the keys of the query object in the scope, and then gradually go down the chain to having only one attribute; but when I attempted this, I kept encountering the error "cannot find .value of 'null'", especially during testing with
(below is a snippet resembling my controller)
vm.openFoos = function (event) {
if (event.target.attributes.getNamedItem('attr-foo').value &&
!event.target.attributes.getNamedItem('attr-bar').value) {
var obj = {
foo: event.currentTarget.attributes.getNamedItem('attr-foo').value,
name: $routeParams.name
} else if {
(event.target.attributes.getNamedItem('attr-foo').value &&
event.target.attributes.getNamedItem('attr-bar').value) {
var obj = {
foo: event.currentTarget.attributes.getNamedItem('attr-foo').value,
name: $routeParams.name,
bar: event.currentTarget.attributes.getNamedItem('attr-bar').value
}
}
data.getReviews(obj)
.success(function (data){$log.debug(data)}).error(function(e){$log.debug(e)});
};
This logic works when clicking on elements with both attr-foo and attr-bar (based on the specific order of checking from most strict case of having attributes to least), as switching the order of the if statements would result in the "cannot find value of null" error. Sample HTML:
<span class="one" ng-click="vm.openFoos($event) attr-foo="foooo">Click FOOO</span>
<span class="two" ng-click="vm.openFoos($event) attr-foo="fo" attr-bar="bar">Click FOO BAR</span>
When clicking span.one, it triggers the "cannot find value of null" error, whereas clicking span.two works correctly. I don't want to create a separate controller for each unique combination of keys in my query that appear in different HTML attributes, yet I'm still facing this issue.