AngularJS解决ng界面长表达式(ui-set)的方法分析

AngularJS中长表达式的解决方案及ui-set的使用技巧

亲爱的开发者朋友们，你是否也曾在AngularJS中遇到过界面长表达式的问题？今天，我将以一个问题为例，向大家介绍AngularJS如何解决这一问题，并通过具体实例展示相关的使用技巧。

让我们看看网友sun shine遇到的问题：在$scope中的对象名字写的特别深，在html中多次用到同一个对象，能否在html中让它绑定到一个临时变量？

比如这样的代码：

$scope.this.is.a.very.deep.obj = {'name': 'x','state': 'active'};

在模板中需要多次使用此对象：{{this.is.a.very.deep.obj.name}} {{this.is.a.very.deep.obj.state}}。

网友试图将this.is.a.very.deep.obj预先赋给一个临时的变量，然后在两个span中只需用o.name和o.state。他觉得这样起来可能会更快。

在AngularJS中，ng界面的所有引用都需要在$scope这个viewmodel(ui和view的胶水层)上进行。如果我们希望把表达式变得更可读、更友好，我们必须在$scope上创建这个变量。ng使用了一堆的$watch实现脏检查，如果你理解了这些，就可以很容易地实现一些如spring的的tag。

对于实现这类tag，最好的方式是利用ng的directive。下面是一个简单的例子：

我们通过创建一个名为"uiSet"的指令，可以在html中轻松地将深层次的$scope对象绑定到一个临时变量。这样，在模板中使用该变量就会更加简洁、清晰。以下是代码示例：

```javascript

angular.module("greengerong.ui.tag", [])

.directive("uiSet", [

function() {

return {

restrict: "EA", // E为元素级指令，A为属性指令

link: function(scope, elm, iAttrs) {

scope.$watch(iAttrs.expression, function(val) {

// 将表达式的值赋给iAttrs.var对应的变量

scope[iAttrs.var] = val;

// 应用变化到视图，如果当前不在脏检周期则手动触发一次脏检

var apply = !scope.$$phase ? scope.$apply : angular.noop;

apply();

});

}

};

}

]);

```

在html中可以这样使用：

后续直接使用o即可。希望这种解决方案能够帮助大家更好地处理AngularJS中的长表达式问题。对于指令的使用和定制，还需要根据具体需求进行更深入的研究和。希望本文能够对大家的AngularJS程序设计有所帮助。接下来我们将继续更多关于AngularJS的知识和技巧。