<div class="miniProfile lift:MiniProfileSnippet.render">
<h2 class="displayName"><a href="">masterblaster69</a></h2>
<img class="avatar" alt=""/>
</div>
class MiniProfileSnippet {
def render = {
". miniProfile *" #> unboxProfiles(username).map{miniProfile =>
".displayName" #> miniProfile.displayName &
".avatar [src]" #> miniProfile.avatarUrl &
".avatar [alt]" #> miniProfile.displayName "'s avatar" &
".profileLink [href]" #> miniProfile.linkUrl
}
}
}
<div class="miniProfile" ng-controller="MiniProfileCtrl">
<h2><a href="{{url}}">{{displayName}}</a></h2>
<img alt="{{alt}}" ng-src="{{avatar}}"/>
</div>
<div class="miniProfile lift:MiniProfileSnippet.render">
<h2 class="displayName"><a href="">masterblaster69</a></h2>
<img class="avatar" alt=""/>
</div>
var app = angular.module('MiniProfile', []);
app.controller('MiniProfileCtrl', function($scope){
$scope.displayName = 'masterblaster69';
$scope.url = '/profile/overview/51f1ad63c02615c0de1ab82a';
$scope.avatar = 'some/avatar/url.png';
$scope.alt = 'user avatar';
});
<div class="miniProfile" ng-controller="MiniProfileCtrl">
<h2><a href="{{url}}">{{displayName}}</a></h2>
<img alt="{{alt}}" ng-src="{{avatar}}"/>
</div>
<div class="miniProfile" ng-controller="MiniProfileCtrl">
<h2><a href="{{url}}">{{displayName}}</a></h2>
<img alt="{{alt}}" ng-src="{{avatar}}"/>
</div>
<span ng-controller="MiniProfileCtrl">
{{displayName}}'s {{alt}} can be downloaded at:<br>
{{avatar}} and their profile is located
<a href="{{url}}">here</a>.
</span>
<div class="miniProfile" ng-controller="MiniProfileCtrl"
ng-mouseenter="showMiniProfile()"
ng-mouseleave="hideMiniProfile()">
<h2><a href="{{url}}">{{displayName}}</a></h2>
<img alt="{{alt}}" ng-src="{{avatar}}"/>
<ul>
<li ng-show="gender">{{gender}}</li>
<li ng-show="location">{{location}}</li>
</ul>
</div>
<div ng-app>
<a class="userName" href=""
ng-controller="MiniProfileCtrl"
popover-placement="{{isViewable() && 'top' || 'bottom'}}"
ng-mouseenter="showMiniProfile()"
ng-mouseleave="hideMiniProfile()"
popover-template="miniprofile.html">username</a>
</div>
<div ng-app="MiniProfile">
<a class="userName" href=""
ng-controller="MiniProfileCtrl"
popover-placement="{{isViewable() && 'top' || 'bottom'}}"
ng-mouseenter="showMiniProfile()"
ng-mouseleave="hideMiniProfile()"
popover-template="miniprofile.html">username</a>
</div>
angular.module('MiniProfile', ['ui.bootstrap.popover'])
.controller('MiniProfileCtrl', function($scope){...});
<div>
<a class="userName" href=""
ng-controller="MiniProfileCtrl"
popover-placement="{{isViewable() && 'top' || 'bottom'}}"
ng-mouseenter="showMiniProfile()"
ng-mouseleave="hideMiniProfile()"
popover-template="miniprofile.html">username</a>
</div>
$('.userName').on('mouseenter', function(){
angular.bootstrap($this, ['MiniProfile']);
});
"[Angular] handles all of the DOM and AJAX glue code you once wrote by hand and puts it in a well-defined structure." --Google