AngularJS是否具有在div中为属性别名的语法？ [英] Does AngularJS have a syntax to alias a property within a 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: '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部分中显示购买历史的概述，我可以这样做：
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中为属性别名的语法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
