Javascript 何时编写指令？
Angular为我们提供了一种编写指令的机制，它的功能非常强大。但我一直想知道的是——在什么情况下，您应该实际编写自己的自定义指令 在堆栈溢出中，我们不断看到各种各样的人试图编写指令，而这些指令（在我看来）一开始就不需要编写。在大多数情况下，它们可以通过重复、切换和显示的组合来解决。请参阅包含指令的问题示例，我认为这些指令首先不应该是指令 一些示例场景。无论如何，我不是在挑他们的毛病，因为我确信任何人都不清楚我们应该在什么时候使用/编写指令 我们看到的场景是，人们使用指令作为模板化机制。这是正确的做事方式吗？还是有更好的办法？（ng可能包括？）使用指令作为模板机制有什么好处/坏处吗？这个问题的原因是，有时我想知道人们是否会编写指令，因为来自jquery世界的人们首先想到的是编写DOM操作代码，而由于角度的方法是不在控制器中操作DOM，所以所有这些都会被吸引到在指令中编写所有代码 编辑： 我认为，之所以会出现这种混淆（将东西推到指令中），是因为Angular没有单独的“视图”概念，这与主干不同（主干只有“视图”，但没有组件！）。指令在定义组件方面非常出色，但我认为如果您使用它们来创建“视图”，您将失去一些“角度”方式。这是我的观点，这就是为什么我要征求其他人的意见 更简单的指令（只做一件事的指令！）的好处是它们绝对易于测试。如果你看看所有的ng指令，它们都做了一件事，而且做得很好 在Angular中定义可重用“视图”（而不是组件！）的最佳方法是什么？这应该写在指令中吗？还是有更好的办法Javascript 何时编写指令？,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,Angular为我们提供了一种编写指令的机制，它的功能非常强大。但我一直想知道的是——在什么情况下，您应该实际编写自己的自定义指令 在堆栈溢出中，我们不断看到各种各样的人试图编写指令，而这些指令（在我看来）一开始就不需要编写。在大多数情况下，它们可以通过重复、切换和显示的组合来解决。请参阅包含指令的问题示例，我认为这些指令首先不应该是指令 一些示例场景。无论如何，我不是在挑他们的毛病，因为我确信任何人都不清楚我们应该在什么时候使用/编写指令 我们看到的场景是，人们使用指令作为模板化机制。这
如果其中一个角型开发人员对这件事有意见，那就太棒了 我个人编写了很多指令，因为它们使我的程序更具声明性 一个例子：在我最近制作的一个JSON->HTML表单解析器中，我创建了一个“form element”指令，它解析JSON元素a，并创建必要的指令作为它的子元素。这样，我对每个字段类型都有一个指令，带有特定的行为和方法。此外，所有元素之间共享的任何公共行为都在formelement指令中 这样，group元素就是一个在其模板中带有ng repeat的指令，title元素就像h1一样简单。但所有字段都可以具有相同的条件行为（例如，只有在前一个字段设置了某个值时，才能显示组）。所有这些都非常干净——每当我需要添加/更改时，它们都保持完美的状态，html是非常声明性的 编辑-包括通过注释请求的代码片段
/**
* Form Element
* ============
*
* Handles different elements:
* Assigns diferent directives according to the element type
* Instanstiates and maintains the active property on the formElem
*/
.directive("formElement", ['$compile', function($compile){
return{
restrict: "E",
scope:{formElemModel: '='},
link: function(scope, element, attrs){
var template = '';
var type = scope.formElem.type;
switch (type){
case "field":
template =
"<form-field-"+scope.formElemModel.fieldType+" ng-switch-when='true'>\
</form-field-"+scope.formElemModel.fieldType+">";
break;
default:
template = "<form-"+type+" ng-switch-when='true' ></form-"+type+">";
break;
}
element.html(template);
$compile(element.contents())(scope);
// Active state of form Element
scope.formElem.active = true;
scope.testActive = function(){
if(scope.$parent.formElem && scope.$parent.formElem.active == false){
scope.formElem.active = false;
}
else{
scope.formElem.active =
scope.meetsRequirements(scope.formElem.requirements);
}
}
scope.$watch("meetsRequirements(formElem.requirements)", scope.testActive);
scope.$watch("$parent.formElem.active", scope.testActive);
}
}
}])
/**
*形式元素
* ============
*
*处理不同的元素：
*根据元素类型指定不同的指令
*实例化并维护formElem上的活动属性
*/
.directive（“formElement”[“$compile”，函数（$compile）{
返回{
限制：“E”，
作用域：{formElemModel:'='}，
链接：函数（范围、元素、属性）{
var模板=“”；
变量类型=scope.formElem.type；
开关（类型）{
案例“字段”：
模板=
"\
";
打破
违约：
模板=”；
打破
}
html（模板）；
$compile（element.contents（））（范围）；
//表单元素的活动状态
scope.formElem.active=true；
scope.testActive=函数（）{
if（scope.$parent.formElem&&scope.$parent.formElem.active==false）{
scope.formElem.active=false；
}
否则{
scope.formElem.active=
范围.满足要求（范围.格式.要求）；
}
}
范围.$watch（“满足要求（格式要素要求）”，范围.testActive）；
scope.watch（“$parent.formElem.active”，scope.testActive）；
}
}
}])
Testtitlemy title