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/ On Friday, February 7, 2014 1:48:38 PM UTC-5, Dean Anderson wrote: > 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. > > > > > On Friday, February 7, 2014 11:27:11 AM UTC-7, Vanya Dineva wrote: >> >> 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. >> >> >> >> On Thursday, February 6, 2014 8:45:52 PM UTC-5, Dean Anderson wrote: >>> >>> >>> 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'); >>> } >>> >>> } >>> } >>> }); >>> >>> >>> -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/groups/opt_out.
