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.
