具有Angular Expression参数的AngularJS ng-click函数返回语法错误

Question

我正在制作一个笔记web应用程序，我正在使用AngularJS框架。我成功显示笔记，我想使用Unique_id删除和更新笔记..我尝试使用字体中的笔记uid进行ng-repeat -awesome关闭图标使用点击功能

代码如下：

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

以下是<remove-notes>指令的指令代码：

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');
        })
    }
}
});

但是当我点击带有click事件处理程序的Icon时，它会给我一个解析错误：

当我在控制台中检查“元素”面板时..它会呈现ang表达式{{Notes.notes_uid}}的值

有没有更好的方法来实现删除功能..我只是想知道如何以异步方式将notes_uid传递给我的后端php代码..

Answer 1

当您使用Angular的内置指令ng-click时，您需要删除表达式中的括号。

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

另一个更好理解的示例：ng-value="myValue"和value="{{myValue}}"完全相同，但你不应该混淆它们。

更新

似乎对象Notes没有传递给指令范围。一种可能的解决方案是将ng-model绑定到像

这样的指令

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');
        })
    }
}
});

然后在您的外部视图中，将模型绑定到ng-model，如

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

Answer 2

将它放在你的模板中：

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

试试这个：

    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');
          })
      }
  }
});

希望这有帮助！