AngularJS是否具有在div中为属性别名的语法？ | AngularJS是否具有在div中为属性别名的语法

本文介绍了AngularJS是否具有在div中为属性别名的语法？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是一个很奇怪的问题，但这是个主意：

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

假设我有一个复杂的JSON对象，它从HTTP调用返回并附加到 $ scope 。像这样的东西：

Let's say I have a complex JSON object coming back from an HTTP call and attaching to the $scope. 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: '[email protected]',
            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' }
    ]
}

现在，如果我想在AngularJS部分中显示购买历史的概述，我可以这样做：

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

<table>
    <tr ng-repeat="p in obj.purchase_hist">
        <td>{{p.item_id}}</td>
        <td>{{p.date}}</td>
    </tr>
</table>

关于这种格式的真正方便之处（尽管在这里只有很少的道具不是很明显）描述的购买别名为 p 。我不必做 obj.purchase_hist [0] .item_id ，我可以做 p.item_id 。

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 p. I don't have to do obj.purchase_hist[0].item_id, I can just do p.item_id.

但是当我显示用户的家庭住址时该怎么办？我真的必须这样做吗？：

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

<div>
    <p>{{obj.user.contact.home.street}}</p>
    <p>{{obj.user.contact.home.city}}</p>
    <p>{{obj.user.contact.home.state}}</p>
    <p>{{obj.user.contact.home.zip}}</p>
</div>

这真的很冗长。我宁愿使用类似于 controller的东西作为... 语法，例如：

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

<div ng-alias="obj.user.contact.home as uhome">
    <p>{{uhome.street}}</p>
    <p>{{uhome.city}}</p>
    <p>{{uhome.state}}</p>
    <p>{{uhome.zip}}</p>
</div>

AngularJS中是否存在这样的东西？不幸的是，我在我的环境中不能很好地使用插件，因此我特别在寻找可以用这种方式工作的角度内核。

Is there such a thing that exists in AngularJS ? 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.

谢谢！

推荐答案

我已经编写了这个小指令，可以让您执行所需的操作：

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

指令ngAlias

(function(){

  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];
          });

          console.log(object)

          scope[args[0]] = object;
        }
    };
  }

angular
  .module('app')
  .directive('ngAlias', ngAlias);


})();

例如，在控制器中设置对象

For example, set your object in your controller

控制器

(function(){

function Controller($scope) {


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

}

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

})();

您可以使用它：

HTML

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

    <div ng-alias="toto as obj.toto">
      {{toto.nom}}
    </div>

  </body>

这篇关于AngularJS是否具有在div中为属性别名的语法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！