How To Invoke Custom Element Member Method On Click?

AKA How to get around or avoid Referencing DOM nodes in Angular expressions is disallowed when accessing custom element methods. So I'm using David Shapiro's small library angular-

Solution 1:

This is because AngularJS 1.x is not yet web component friendly. It assumes that you must be stupid if you reference DOM properties directly from w/in the angular universe since that code could be malicious or it just violates the original notion that angular code should be completely encapsulated from the outside world and the framework handles all outside interaction. While this is true in most cases, it came about at a time before we knew that Custom Elements would soon be core to the way we construct reusable UI web components.

Until NG 2.0 you'll probably need to do something like this:

replace this:

<div ng-click="el.elementMethod()">

with this:

<div ng-click="callMember()">

$scope.callMember = function(){
    $scope.el.elementMethod();
};

With the replacement code there is no error.

What's interesting though, is that the same DOM access via {{ el.propertyNameOne }} does not cause Angular to throw the same error. Go figure.