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

debugcn Published at Dev

ChanX

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..

Rebornix

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-07-4

Comments

0 comments

From Dev

Related Related

Article