这是一个奇怪的问题，但我的想法是:
假设我有一个从 HTTP 调用返回并附加到 $scope 的复杂 JSON 对象。像这样:
$scope.obj = {
user: {
id: 10,
name: { first: 'Joe', last: 'Smith' },
contact: {
home: {
street: '101 First St.',
city: 'Myville',
state: 'Jokelahoma',
zip: '98765'
},
email: 'joeshmoe@gmail.com',
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>
这种格式真正方便的地方(尽管在这里用这么少的 props 并不是很明显)是所描述的购买别名是 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 核心的一部分。
谢谢!
最佳答案
我写了这个小指令，它允许你执行你想要的:
指令 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);
})();
例如，在你的 Controller 中设置你的对象
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>
关于javascript - AngularJS 是否具有在 div 中为属性设置别名的语法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31857845/