AngularJS Example:
HTML
<div ng-app="app">
<p id="test-{{ foo }}">Test Element</p>
<selector for="test-{{ foo }}"></selector>
</div>
CSS
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<style>
JavaScript
angular.module('app', [])
.run(function($rootScope) {
$rootScope.foo = 'bar'
})
.directive('selector', function($templateCache, $timeout) {
return {
restrict: 'E',
scope: {
query: '@for'
},
link: function($scope, $element) {
$timeout(function(){
var id = $element.parent().children().eq(0).attr('id');
var foundElement = !!document.getElementById($scope.query);
$element.text('Try to get element with id "' + id + '" with query "' + $scope.query + '"? ' + foundElement + '.');
});
}
};
});