AngularJS指令为“非视觉”任务 [英] AngularJS directives for 'non visual' tasks
问题描述
有场景，我发现自己写标记code是这样的：
There are scenarios where I find myself writing markup code like this:
<div ng-repeat="chapter in data.Chapters">
<table>
<tr ng-repeat="row in data.Rows">
<td ng-repeat="column in data.Columns">
{{chapter.Values[$parent.$index][$index].V}}
</td>
</tr>
</table>
</div>
最后结合前pression变得复杂，如果你想象的场景，其中 chapter.Values [$父。$指数] [$指数] 是一个复杂的对象，你必须访问其所有属性，那么这些绑定得到长期和嘈杂。我写了一个简单的指令，让我对我的标记改成这样：
The final binding expression can get complex, and if you imagine scenarios where chapter.Values[$parent.$index][$index] is a complex object and you have to access all of its properties, then those bindings get long and noisy. I wrote a simple directive that allows me to change my markup to this:
<div ng-repeat="chapter in data.Chapters">
<table>
<tr ng-repeat="row in data.Rows">
<td ng-repeat="column in data.Columns"
append-context name='item'
expression='chapter.Values[$parent.$index][$index]'>
{{item.V}}
</td>
</tr>
</table>
</div>
现在，使用后，我的追加上下文指令（code忽略，但它是微不足道的），我可以参考我的对象具有的别名的（项目），这极大地简化了可读性。
Now, after using my append-context directive (code omitted, but it's trivial), I can refer to my object with an alias (item) which greatly simplifies readability.
我有这种感慨，因为该指令是不是真正的在增强其布点的能力，它确实是真的涉及范围管理方面扩展HTML 的。我有，我用类似的方法来处理事情等等，例如其他情况下，重重绘（透明地引进的setTimeout 通过具体的指令调用），又没有严格相关的HTML渲染
I have mixed feelings with this because the directive is not really extending HTML in terms of enhancing its layouting capabilities, what it really does is really related to scope management. I have other contexts where I used a similar approach to handle things like, for example, heavy redraws (transparently introducing setTimeout calls through specific directives), again not strictly related to HTML rendering.
你是否认为这是一个合理的办法，或者只是一招解决应该首先得到解决以不同的方式有问题？
Do you think it's a legitimate approach, or just a trick to solve a problem that should have been solved in a different way in the first place?
更新
下面所提到的指令：
angular.module('directives', [])
.directive('appendContext', function () {
return {
restrict: 'A',
controller: function ($scope, $attrs) {
var expression = $attrs.expression,
name = $attrs.name;
$scope[name] = $scope.$eval(expression);
}
};
})
更新2
@DavidChase在他的评论的好点，虽然我仍然混合有关创建的通用的控制器的感觉（但很可能这只是我）。也许这等指令是一个更好的例子：
@DavidChase has a good point in his comment, although I still have mixed feelings about creating a general purpose controller (but it's very likely it's just me). Probably this other directive is a better example:
angular.module('directives', [])
.directive('progressive', ['$timeout', 'status', function (timer, status) {
return {
restrict: 'E',
transclude: true,
compile : function (el, attrs, transclude) {
return function (scope, element) {
status.working.start(function(working) {
timer(function () {
transclude(scope, function (node) {
element.append(node);
});
working.stop();
}, 10);
});
};
}
};
}])
在这种情况下，没有真正的DOM操作，因为我不添加任何东西给它，但我用了几个外部服务的 transclude 的在一个异步的方式的内容，以小幅提高长刷新（避免陷入UI）的情况下，UI体验。正如我所说，我不添加任何东西到DOM，但创造东西的时候我只是控制。它是一个很好的用例指令？
In this case there is no real DOM manipulation, because I do not add anything to it, but I use a couple of external services to transclude the content in an "async" way, in order to slightly improve the UI experience in case of long refresh (avoiding stuck UI). As I said, I don't add anything to DOM, but I just control when things are created. Is it a good use case for a directive?
推荐答案
要回答你的问题，而不是我的污染上述评论（由于缺乏一个更好的词）。
To answer your question instead of me "polluting" the comments above (for lack of a better word).
控制器定义 这里 用于像您正在使用他们的扩大范围
他们可以一个范围添加一个初始状态，如：
They can one add an initial state to the scope such as:
$ scope.message ='你好'，然后用 {{}信息} 在您的模板或视图
$scope.message = 'hello' and then use {{message}} in your template or view
他们还可以创建通过功能上的范围动作，如：
They can also create actions on the scope via functions such as:
- 计算
- 基于逻辑的决定
- 评估
从本质上讲他们做的商业逻辑视图和模型/数据层之间。
Essentially they do the "business logic" between view and model/data tier.
控制器，目的是要简单/最小，否则创建一个工厂或服务，并传递给控制器。
Controllers are meant to be simple/minimal otherwise create a factory or service and pass them to controllers.
指令是DOM操纵和其他基于视图的变化。
Directives are for DOM manipulating and other view based changes.
希望这点你到正确的方向（以一种迂回的方式）不使用你的情况的指令，并使用控制器或者如果需要创建一个服务，然后注射到控制器。
Hopefully this points you into the right direction (in a roundabout way) of not using the directive in your case and using a controller or if need creating a service and then injecting into a controller.
这篇关于AngularJS指令为“非视觉”任务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
