Question

在我看来，我有这样的代码：

<script id="template/accordion/accordion.html" type="text/ng-template">
  <div class="panel-group" data-ng-transclude></div>
</script>
<script id="template/accordion/accordion-group.html" type="text/ng-template">
  <div class="panel panel-default">
    <div class="panel-heading custom">             
      <h4 class="panel-title custom">
        <a href accordion-transclude="heading" data-ng-click="toggleOpen();"><span>{{heading}}</span></a>
      </h4>
    </div>
    <div class="panel-collapse" collapse="!isOpen">
      <div class="panel-body" data-ng-transclude></div>
    </div>
  </div>
</script>
<script type="text/ng-template" id="nodes_renderer.html">
  <accordion close-others="false">
    <accordion-group>
      <accordion-heading>
        {{node.Title}}
      </accordion-heading>                      
      <div data-ng-bind-html="node.Text"></div>                     
    <ol ui-tree-nodes="" data-ng-model="node.Childs">
      <li data-ng-repeat="node in node.Childs" ui-tree-node data-ng-include="'nodes_renderer.html'">
    </li>
    </ol>
    </accordion-group>                   
  </accordion>
</script>
<div ui-tree="options">
  <ol ui-tree-nodes data-ng-model="articles">
    <li data-ng-repeat="node in articles" ui-tree-node data-ng-include="'nodes_renderer.html'"></li>
  </ol>
</div>

获取node.Options.length是真的，当我尝试在这里渲染标题时：

<div class="panel-heading">             
      <h4 class="panel-title">
        <a href accordion-transclude="heading" data-ng-click="toggleOpen();" class="no-link"><span>{{heading}}</span></a>
      </h4>
    </div>

然后如果我的node.Options高于0我会做ng-class ...

我怎样才能将变量传递给非我的指令模板？

我也必须传递整个节点对象，以便我可以编辑它等...

Answer 1

每个指令都在范围内。我有一个类似的情况，我写了一个通用的寻呼机指令，从Controller范围中提取其细节。我的模板已外部化，但这不会影响功能。

指令用法：

<div class="row" ng-controller="TableController">
    <table-pager></table-pager>
</div>

指令定义：

angular.module.directive('tablePager', function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'templates/table-pager.html'
    };
})

控制器：

angular.module.controller('TableController', function($scope, $log, $location) {
    $scope.query = {};
    $scope.limit = 20;
    $scope.offset = 0;
    $scope.currentPage = 0;
    $scope.total = 0;
    ...
}

templates/table-pager.html（摘录）的模板代码：

<div class="row">
    <div class="col-md-4">{{total}} Entries found</div>

    <div class="col-md-4 col-pager">...</div>
</div>

您可以在http://tutorials.jenkov.com/angularjs/custom-directives.html

了解有关AngularJS自定义指令的更多信息

HTH

angularJS将变量传递给ui.bootstrap模板

1 个答案: