AngularJS Directives parameters passing to templates ng-click

[Dean Anderson]

Thank you in advance to anyone that can help.  I'm getting REALLY frustrated trying to figure this problem out.

I'm using ng-repeat in my html to display different types of phones.  I use the "key" attribute to pass it into the directive.
I've got an $observe in my directive to note any changes as it goes through ng-repeat. 

The ng-click in the template is giving me nightmares.

I'm trying to get it so that when I click on the delete button in the popup, it gives me the value of the button (i.e.  HOME, OFFICE, CELL, etc)
Here is the resulting html:

<phone-button key="Home">
  <button class="rule-button home" id="rule-option-item">Home</button>
  <p id="p-rule-option-item" class="ng-binding">Home</p>
  <div data-attr="" style="display:none" id="rule-change-modal">
    <button class="rule-change" data-attr="move">Move</button>
    <button ng-click="deleteClicked(Home)" class="rule-change" data-attr="delete">Delete</button>
  </div>
</phone-button>

Instead, I'm seeing this error in my browser:

Token 'newPhoneButton' is unexpected, expecting [:] at column 17 of the expression [deleteClicked({{newPhoneButton}})]

Here is examples of most of my code:
    ruleSet[0]
        Target [{name: HOME}, {name: OFFICE}]
    ruleSet[1]
        Target [{name: CELL}]
    ruleSet[2]
        Target [{name: WORK}]

<div id="rule-bar" class="rule-bar">
    <div class="rule-option" ng-repeat="targetItem in ruleSet.target">
        <phone-button key='{{ targetItem.name }}'></phone-button>
</div>

$scope.newPhoneButton="";

app.directive('phoneButton', function($compile) {
    return {
        restrict: 'EAC',
        template:    "<button id='rule-option-item' class='rule-button {{newPhoneButton | lowercase}}'>{{newPhoneButton}}</button><p id='p-rule-option-item'>{{newPhoneButton}}</p>" +
                    "<div id='rule-change-modal' style='display:none' data-attr=''><button data-attr='move' class='rule-change'>Move</button><button data-attr='delete' class='rule-change' ng-click='deleteClicked({{newPhoneButton}})'>Delete</button></div>" ,
        link: function(scope, elements, attrs) {
            attrs.$observe("key", function(key){
                scope.newPhoneButton = key;
            });

            elements.bind('click', function() {
                $compile($("#rule-change-modal").html())(scope);
            });

            scope.deleteClicked = function(val) {
                alert(val);
                alert('deleteClicked');
            }

        }
    }
});

[Sander Elias]

Hi Dean,

If you would have put this in a plunk/fiddle I would have taken a more serious look at this!

Regards

Sander

[Vanya Dineva]

Hi Dean,

try:
  ng-click='deleteClicked(newPhoneButton)'

instead of
  ng-click='deleteClicked({{newPhoneButton}})'

I would also take a look if you have a fiddle or plunk with your code.

[Dean Anderson]

I've created a fiddle to see the current functionality that I'm trying to resolve.

http://jsfiddle.net/dxande6/DTsUr/

Not that when you click a button and then hit delete, it always shows HOME.
I'm trying to get it to return the value of the button.

Thank you for any assistance.

[umi]

Dean, keep in mind that your phone-button directive is repeated several times which means you will have multiple divs with the same "id" (#rule-change-modal) and you'll retrieve only the first with your jquery selector.

There's no reason to use jQuery and what you're trying to do is easily accomplished with the tools angular provides you. For hiding/showing elements, consider using  ng-hide or ng-show. Binding click listener's isn't necessary either, and can be done with the more declarative syntax that ng-click provides. 

There are lots of ways to go about it but here's a quick solution: http://jsfiddle.net/vJphd/

[Dean Anderson]

This is exactly what I was looking for.  Thank you so much for the advise and the solution you have provided.

 

Greatly appreciated.

 

-Dean