程序员经验分享-hwhale

AngularJS 是否有为 div 中的属性添加别名的语法？

2023-12-29

这是一个奇怪的问题，但我的想法是：

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

$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] /cdn-cgi/l/email-protection',
            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 部分中显示购买历史记录的概述，我可以这样做：

<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.

但是当我去显示用户的家庭住址时呢？我真的必须这样做吗？：

<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 as ...语法，类似这样：

<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 中存在这样的东西吗？不幸的是，我不太能够在我的环境中使用插件，所以我专门寻找以这种方式工作的 Angular Core 的一部分。

Thanks!


我写了这个小指令，它允许您执行您想要的操作：

指令 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);


})();

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

控制器

(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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

angularJS

alias

AngularJS 是否有为 div 中的属性添加别名的语法？ 的相关文章

随机推荐

热门标签