This is exactly what I was looking for. Thank you so much for the advise and the solution you have provided. Greatly appreciated. -Dean
On Friday, February 7, 2014 9:45:53 PM UTC-7, umi wrote: > > 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.
