Question

我正在学习AngularJS，我对指令有点问题。我不喜欢他们的样子。具体来说，我不喜欢在javascript中间有很多html。请看以下示例：

myApp.directive("myDir", function() {
  return {
    restrict: "E",        // directive is an Element (not Attribute)
    scope: {              // set up directive's isolated scope
      name: "@",          // name var passed by value (string, one-way)
      amount: "=",        // amount var passed by reference (two-way)
      save: "&"           // save action
    },
    template:             // replacement HTML (can use our scope vars here)
      "<div>" +
      "  {{name}}: <input ng-model='amount' />" +
      "  <button ng-click='save()'>Save</button>" +
      "</div>",
    replace: true,        // replace original markup with template
    transclude: false,    // do not copy original HTML content
    controller: [ "$scope", function ($scope) { …  }],
    link: function (scope, element, attrs, controller) {…}
 }
});

从javascript字符串呈现的html代码看起来很老了。：d 我已经看到有templateUrl可以使用，但是会加载整页，如果指令很小，这似乎远非最佳。

我想要做的是加载一个包含大量命名模板的html文件。这是否容易，如果没有，任何人都有成功的模式吗？

有人能指出我正确的方向吗？经过这些年代码和html的分离后，我真的不想开始在我的代码中编写html，而且我不想通过扩展框架来开始我作为AngularJS开发人员的职业生涯。 ;）

或者我使用指令错了？（上面的示例代码来自我阅读的教程）

Answer 1

是的，你当然可以做到。您可以使用任何html页面创建ng-template脚本部分。请参阅我为可编辑指令http://jsfiddle.net/cmyworld/6gMXL/

创建的小提琴

如果添加

等脚本

<script type="text/ng-template" id="editable-template"> </script>

您可以使用templateUrl在指令定义中引用它们。

Answer 2

你已经掌握了大部分权利。

我不确定你的意思是＆＃34;整页＆＃34;，但是。

Angular适用于模板＆＃34; partials＆＃34;，与服务器端模板可能的方式相同......

// currentDirective = {.....
templateUrl : "/templates/current-directive.html"
// ...}; return currentDirective;

同时，该文件的内容只是：

<div class="current-directive>
    <div><span>{{ property }}</span><button ng-click="method(arg)">click</button></div>
</div>

是的，这似乎是浪费对于一些HTML元素来说，这是一次完整的往返。

但是，angular也会缓存该指令模板该指令的未来实例导致模板的内存重建，使其比许多其他解决方案更轻（仅在实际使用模板时加载模板，并且仅加载一次，而不是加载整个应用程序的模板，如果您只使用两页的小部件，或者反复使用服务器重新生成模板。

也就是说，如果您确实拥有将模板批处理在一起的强大案例，那么您可以做的是让您的服务器批量生成所有模板化字符串＆＃39; ...以及它们的所有网址应该在批处理过程中生活在...对象数组中：

/模板我-template.html 其他-template.html 另一个-template.html

变为

[{
    url : "/templates/my-template.html",
    template : '<div>{{prop}}</div>;
 } /*,...*/]

然后，您可以做的是请求$ templateCache对象我不确定它到底是什么（服务/工厂），因此，我不确定它何时需要运行，但基本上，当所有设置都已完成时。

如果JS数组被动态地打印到页面中，那么你可以说：

angular.module("myApp").run(function ($templateCache) {
    templates.forEach(function (cached) {
        $templateCache.put(cached.url, cached.template);
    });
});

之前发生你实际上是在Angular内部（即：在window.load之前）。

如果您要从HTTP请求获取该数组作为JSON包，那么您之后需要手动引导Angular，因为它使用ng-app为时已晚，自动。

angular.bootstrap(document.documentElement, ["myApp"]);

另一种方法是在第一页上使用<script>标记。

<script type="text/ng-template" id="/templates/my-template.html"> <div >{{ prop }}</div> </script>

Angular现在会自动将该模板缓存到该URL。您现在需要将所有模板都放在脚本标记中，并嵌入到页面中，在window.onload事件之前，以及ng-app边界的范围内。

现在，你不能让用户下载绝对的一切，开始。

为了使用这些预先缓存的模板，您需要做的就是将$ templateCache注入指令（指令的顶级定义，而不是调用范围/控制器），然后调用{{ 1}}

.get(url)

不需要扩展。
请注意，使用＆＃34; templateUrl＆＃34;和使用// currentDirective = { ... template : $templateCache.get("/templates/current-directive.html"), // }; return directive都有各自的缺点。

Angularjs指令在代码中没有html？

2 个答案: