如何使用AngularJS编写可重用的HTML组件

刚开始学习Angular，到目前为止，我很喜欢它，但学习曲线似乎相当陡峭。我想做的是总结一些简单的业务逻辑，构建一些可重用的DOM组件，以模板化系统的公共区域。具体来说，我正在编写一个具有不同问题类型的简单调查应用程序。我的目标是，当我处于ng重复块时，我可以这样做：

<div ng-repeat="question in questions">
     <show-question></show-question>
</div>

理想情况下，我希望将所有逻辑封装到一个语句中，以打开问题类型，然后从templateUrl中提取不同的HTML集。因此，如果一个question.type=“text”，它将拉取“templates/textQuestion.html”的templateUrl，并能够在生成DOM元素时将作用域注入该模板文件

最大的问题是，我做得对吗？一个指令是一条路吗？我是否应该尝试在一个指令/标签中完成这一切？我愿意接受这方面的教育

小问题是，如果我朝着正确的方向走，那么正确的实施方式是什么

我已经尝试过在指令中加入一些逻辑，比如IF和SWITCH，但这似乎是无效的

欢迎所有（建设性）帮助

---

谢谢大家

这叫做指令。这里有一个完整的指南：

它允许您创建自定义属性、元素、CSS类和注释，并将其转换为组件

我不会为每个问题类型提取单独的模板，我会为每个问题类型使用不同的指令。然后可以使用父指令在它们之间切换

下面是加载不同指令的指令的外观：

app.directive('question', function($compile){
  "use strict";
  return{
    restrict: 'E',
    replace: true,
    link: function(scope, element, attrs){
      var render = function(){
        var template = "";
        switch(attrs.type){
          case "truefalse":
            template = '<truefalse></truefalse>';
          break;
          case "multiplechoice":
            template = '<multiplechoice></multiplechoice>';
          break;
          case "essay":
            template = '<essay></essay>';
          break;
        }
        element.html(template);
        $compile(element.contents())(scope);
      }

      attrs.$observe('type', function(value) {
          render();
      });
      render();
    }
  }; 
});

app.directive（'question'，function（$compile）{
“严格使用”；
返回{
限制：'E'，
替换：正确，
链接：函数（范围、元素、属性）{
var render=function（）{
var模板=”；
开关（属性类型）{
案例“truefalse”：
模板=“”；
打破
“多重回声”一案：
模板=“”；
打破
案例“随笔”：
模板=“”；
打破
}
html（模板）；
$compile（element.contents（））（范围）；
}
属性$observe（'type'，函数（值）{
render（）；
});
render（）；
}
}; 
});

现在您可以这样使用它：

<question ng-repeat="question in questions" type="question.type" ></question>

---

假设你对每种类型的问题都有一个指令，你会得到不同的指令。这有点类似于使用ng if或其他模板，但我更喜欢它，因为我还可以获得可重用的一次性组件。

因此，如果您的范围变量问题包含每个问题的所有信息，如

$scope.questions = [
  { type: 'input',
    prompt: 'name'
  }
];

然后您可能会有一些html

<div question="question" ng-repeat="question in questions"></div>

如果希望有不同的准备好的模板，那么可以将$templateCache注入指令中

app.directive('question', function($templateCache) {

然后在链接函数中调用它们

link: function($scope, $element, $attrs) {
  var template = $templateCache.get('path/to/template.html');
  // and append it to the element
  $element.append(template);
}

---

你得玩一会儿，但那只是乐趣的一半。祝你好运

我建议您阅读AngularJS文档。你可以找到非常好的教程视频。Stackoverflow并不是一个提出如此广泛问题的地方。我已经阅读了文档，虽然它们非常详尽，但我一直很难理解如何将示例解释为特定的用例（这就是我来到stack学习的内容）。我不会把这个问题说得太宽泛，我举了一个具体的例子，得到了一些非常具体的答案。我知道，我并不是唯一一个在“角度法”进入大脑外壳组方面有点困难的人，只是（对我来说）不同的是，医生们似乎并不总是有意义。6个月后再问我，我相信他们会很容易理解的。伙计，那太完美了！我基本上把代码放在适当的地方，它就工作了。然而，比这更重要的是，看到它的实际应用解锁了我一直在努力解决的问题——我希望这会进展得更顺利一些。我喜欢一个编码块。哈哈，我真的很希望stack的伙计们能让我们在回应时多给一些分数，只是为了表示感谢。不客气，我不是在要求，但你可以通过设置悬赏来给额外的分数。请务必阅读“隔离作用域”和“封装”，因为理解这些概念将真正帮助您使用Angular构建可重用组件。

link: function($scope, $element, $attrs) {
  var template = $templateCache.get('path/to/template.html');
  // and append it to the element
  $element.append(template);
}