kenbellows kenbellows - 1 year ago 61
AngularJS Question

Does Angular have a syntax to alias a property within a div?

This is kind of a weird question, but here's the idea:

Let's say I have a complex JSON object coming back from an HTTP call and attaching to the

. Something like this:

$scope.obj = {
user: {
id: 10,
name: { first: 'Joe', last: 'Smith' },
contact: {
home: {
street: '101 First St.',
city: 'Myville',
state: 'Jokelahoma',
zip: '98765'
email: '',
phone: '+12345678901'
purchase_hist: [
{ item_id: 11004, date: 'Thu, 06 Aug 2015 13:51:17 GMT' },
{ item_id: 97020, date: 'Fri, 31 Jul 2015 18:57:57 GMT' }

Now, if I wanted to display an overview of purchase history in an Angular partial, I could do something like this:

<tr ng-repeat="p in obj.purchase_hist">

The really convenient thing about this format (though it's not super evident here with so few props) is that the purchase being described is aliased as
. I don't have to do
, I can just do

But what about when I go to show the user's home address? Do I really have to do this?:


That's really verbose. I would much rather use something akin to the
controller as ...
syntax, something like this:

<div ng-alias=" as uhome">

Is there such a thing that exists in angular? Unfortunately I'm not very able to use plugins in my environment, so I'm specifically looking for a part of angular core that will work this way.


Answer Source

I've written this little directive, which allow you to perform what you want :

Directive ngAlias


  function ngAlias($compile) {
    return {
        restrict: "A",
        link: function(scope, element, attrs) {
          var args = attrs.ngAlias.split('as').map(function(elm){return elm.replace(/ /g,'')});

          scope[args[0]] = '';

          var dot = args[1].split('.');

          var object = {};

          dot.forEach(function(value, index){
            index === 0
            ? object = scope[value]
            : object = object[value] === null ? object[value] = {} : object[value];


          scope[args[0]] = object;

  .directive('ngAlias', ngAlias);


For example, set your object in your controller



function Controller($scope) {

  $scope.obj = {
    toto: {
      nom: 'toto',
      prenom: 'tata'


.module('app', [])
.controller('ctrl', Controller);


And you can use it :


  <body ng-app="app" ng-controller="ctrl">

    <div ng-alias="toto as obj.toto">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download