自定义指令未在 AngularJS 中加载答案

【问题标题】：Custom Directives Not Loading in AngularJS自定义指令未在 AngularJS 中加载
【发布时间】：2014-07-16 19:28:41
【问题描述】：

我有一个非常大的 index.html 文件，因此我将其拆分为不同的部分 html 文件，我想通过指令将这些文件加载到索引 shell 文件中。下面是 index.html 的相关部分：

   <div north-view></div>
   <div west-view></div>
   <div center-view></div>
   <div east-view></div>

然后我有另一个名为 directives.js 的文件，它将 templateUrls 分配给这些文件：

'use strict';

/* Directives */


angular.module('cstarsApp').
  directive('westView', function() {
    return {
      templateUrl: 'partials/west-view.html'
    };
  }).
  directive('centerView', function() {
    return {
      templateUrl: 'partials/center-view.html'
    };
  }).
  directive('eastView', function() {
    return {
      templateUrl: 'partials/east-view.html'
    };
  }).
  directive('northView', function() {
    return {
      templateUrl: 'partials/north-view.html'
    };
  });

templateUrl 位指定的部分 html 文件如下所示（例如 center-view.html）：

<div class="accordion ui-layout-center" id="searchResultsAccordion" ng-controller="SearchResultsController">
    SEARCH RESULTS
    <h3 class="ui-accordion-header">Search Results Word Cloud</h3>
    <div id="searchResultsWordCloud" style="width:200px; height:100px">
    </div>
    <h3>Search Results</h3>
    <div class="accordion" id="searchResultsDocumentsAccordion">
        <table id='searchResultsTable' class="table table-hover table-condensed table-striped" cellpadding="0" cellspacing="0" border="1" width="100%">
            Some more html..
            ....................
        </table>
    </div>
</div>

问题是此设置无法正确加载部分 html 文件：看起来部分内容显示在网页上，但没有我期望的样式/javascript。

但是，如果我摆脱自定义指令，只需将部分内容粘贴到我指定的 index.html 中，它就可以完美运行。这里发生了什么事？指令的返回值中是否缺少一些参数？提前感谢您的帮助。

【问题讨论】：

如果逻辑不工作，它可能没有从范围中获取控制器。您需要在指令中公开它，否则它无法访问它。关于样式 - 这有点奇怪。如果您在其中一个视图加载后手动调用 $digest，它会起作用吗？
我认为你是对的，因为它没有从范围中获取控制器。我究竟如何“在指令中公开它”？

标签： javascript html angularjs angularjs-directive

【解决方案1】：

如果仅模板需要控制器，则应将其作为控制器添加到指令中。

否则，您需要将作用域的相关部分公开给指令 - 通常不建议公开整个父作用域。

我不会在这里写出所有的可能性，但我会为你指出一个很好的方向，让你了解指令和范围：

这两个都有一个两部分的教程，应该可以帮助你开始。

【讨论】：

是的，只有模板需要控制器。如何“将其添加为指令中的控制器”？例如 center-view.html 使用 SearchResultsController 正如我所展示的。我需要向 centerView 指令添加什么具体内容以使其了解该控制器？
如果您只在指令中使用该控制器并且不需要它之外的它，您可以只使用指令的“要求”来注入控制器。我不认为这就是您的样式未显示的原因，它们是链接在索引文件中还是在其中一个指令中？我认为它们应该在索引文件中。
也许我应该澄清一下。该指令指定的每个部分 html 文件都使用我在单独文件中定义并添加到我的 mainApp 模块中的控制器。我在索引文件的顶部声明了这个 ng-app，是的，我的所有样式都链接在索引文件中。我尝试按照您在指令中的建议使用“require”，但这仍然不起作用。
另外，如果我改用 ng-include 来简单地包含部分 html 文件而不是自定义指令，我也会遇到同样的问题。

【解决方案2】：

您错过了代码中的限制选项，该选项定义了您希望如何调用指令，并且当您将指令作为属性调用时，您应该添加限制：'A'。如果您想将它们用作这样的 HTML 标记，也可以使用“E”

<west-view></west-view>

'E'定义元素

'A'定义属性

 angular.module('cstarsApp').
 directive('westView', function() {
return {
restrict: 'A',
  templateUrl: 'partials/west-view.html'
 };
}).
directive('centerView', function() {
 return {
 restrict: 'A',
  templateUrl: 'partials/center-view.html'
};
}).
 directive('eastView', function() {
return {
restrict: 'A',
  templateUrl: 'partials/east-view.html'
};
}).
 directive('northView', function() {
return {
restrict: 'A',
  templateUrl: 'partials/north-view.html'
};
     });

希望这会有所帮助

【讨论】：