AngularJS ng-click function with Angular Expression parameter returning a Syntax Error

Question

I am making a notes web app where I am using AngularJS framework.. I am succesfully displaying notes and I want to delete and update the notes using Unique_id .. I tried doing the ng-repeat with the notes uid in a font-awesome close icon using the a function on click

Code is below:

<div class="bodyContainer">
    <div class="title">
        <h3>Notes<i ng-click="updateFunc()" class="fa fa-refresh"></i></h3>
    </div>
    <div class="notesBox">
        <div class="notes" ng-repeat="Notes in txtArray | limitTo: 5">
            <remove-notes></remove-notes>
            <p class="notesTitle">{{Notes.notes_title}}</p>
            <p>{{Notes.notes_text}}</p>
        </div>
        <h3 class="emptyBox" ng-hide="txtArray.length > 0">Write Your First Note!!</h3>
    </div>
    <div class="homePaging"><a href="#notes">See more</a></div>
</div>

Here is the Directive Code for the <remove-notes> directive:

diary.directive('removeNotes', function () {
return {
    restrict: 'E',
    template: '<i  class="fa fa-close fa-fw" ng-click="removeNote({{Notes.notes_uid}})">',
    link: function ($scope,element,attrs) {
        element.bind('click', function () {
            element.css('color','#19B5FE');
        })
    }
}
});

But When I click the Icon with the click event handler it gives me a parse error:

Error

When I check the Elements panel in the console.. It renders the value of the ang expression {{Notes.notes_uid}}

Is there any better way to implement the delete capability.. I just want to know how to pass the notes_uid to my backend php code in an Async way..

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

As you are using Angular's built in directive ng-click, you need to remove brackets in your expression.

template: '<i  class="fa fa-close fa-fw" ng-click="removeNote(Notes.notes_uid)">'

Another sample for better understanding: ng-value="myValue" and value="{{myValue}}" are totally the same, but you should't mix them up.

Update

It seems object Notes is not passed to the scope of directive. A possible solution is binding ng-model to directive like

diary.directive('removeNotes', function () {
return {
    restrict: 'E',
    scope: {
      note:'=ngModel'
     //bindAttr: '='
    },
    template: '<i  class="fa fa-close fa-fw" ng-click="removeNote(note.notes_uid)">',
    link: function ($scope,element,attrs) {
        element.bind('click', function () {
            element.css('color','#19B5FE');
        })
    }
}
});

Then in your view outside, bind models to ng-model like

<remove-notes ng-model="Notes"></remove-notes>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 7, 2015 at 6:03

Rebornix

5,2701 gold badge25 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

ChanX Over a year ago

Doesn't Work.. When I check the elements panel ng-click="removeNote(Notes.notes_uid) remains the same Notes.notes_uid is not replaced with the UID .

Rebornix Over a year ago

You mean Notes.notes_uid hasn't been converted the UID?

ChanX Over a year ago

It doesn't .. The Notes.notes_uid stays the same, it doesn't take the value as it should from the array which I want to send using the $http to my backend PHP code.. the element inspector shows ng-click="removeNote(Notes.notes_uid)" It should show something like ng-click="removeNote(xxx)" where xxx is the UID that I want to pass to the backend..

Rebornix Over a year ago

Seems Notes hasn't been passed into the scope of directive, check my update.

ChanX Over a year ago

Still doesn't pull the Notes unique ID .. It stays the same removeNote(note.notes_uid)

|

Shreejibawa · Accepted Answer · 2015-02-07 06:39:58Z

0

Put this in you template:

<remove-notes notes="Notes"></remove-notes>

Try this one:

    diary.directive('removeNotes', function () {
  return {
      restrict: 'E',
      scope: {
        notes : "=notes"
      },
      controller: {
        // Define removeNote function here
      },
      template: '<i  class="fa fa-close fa-fw" ng-click="removeNote(notes.notes_uid)">',
      link: function ($scope,element,attrs) {
          element.bind('click', function () {
              $(element).css('color','#19B5FE');
          })
      }
  }
});

Hope this helps!

edited Feb 7, 2015 at 6:39

answered Feb 7, 2015 at 6:04

Shreejibawa

1,8681 gold badge28 silver badges38 bronze badges

2 Comments

Shreejibawa Over a year ago

define removeNote function in Directive controller.

ChanX Over a year ago

tried defining controller with removeNote function in directive but it doesnt work..

Collectives™ on Stack Overflow

AngularJS ng-click function with Angular Expression parameter returning a Syntax Error

2 Answers 2

Update

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related