Question

我有一个非常大的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，我已经指定它完美无缺。这里发生了什么？在指令的返回值中是否缺少一些参数？提前感谢您的帮助。

Answer 1

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

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

我不会在这里写下所有可能性，但我会指出你在哪里学习指令和范围的好方向：

http://www.sitepoint.com/practical-guide-angularjs-directives/
http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals

这两本教程都有一个2部分的教程，可以帮助你顺利开始。

Answer 2

您错过了代码中的限制选项，该选项定义了您希望如何调用您的指令，并且当您将指令作为属性调用时，您应该添加restrict：＆＃39; A＆＃39;。你可以使用＆＃39; E＆＃39;如果你想将它们用作像这样的HTML标签

<west-view></west-view>

＆＃39; E＆＃39;定义元素

＆＃39; A＆＃39;定义属性

 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'
};
     });

希望这会有所帮助

自定义指令未在AngularJS中加载

2 个答案: