Working with custom attributes / directives in HTML + Javascript

Question

I've been going through vue.js and angular.js code, but cannot figure out how do they handle custom directives in html?

For example, let's say I have the following div: <div my-repeat="item in items"></div>

To achieve something similar to what vue.js does, do I have to scan the whole document's DOM elements to find all the occurances of my- attribute prefix and then somehow try to figure out what the rest of its functionality does?

I have literally spent a few hours trying to figure this out, but with no luck. Any ideas / directions would be much appreciated please.

Answer 1

I don't know for certain how Vue and Angular do it, but here's an example of how you could implement functionality specified in a custom attribute:

 var element = document.querySelector('[function-attribute]'); var fn = new Function(element.attributes['function-attribute'].value).bind(element); fn(); 

 <div value-attribute='something' function-attribute="alert(this.attributes['value-attribute'].value);"></div>