angularJS將變量傳遞給ui.bootstrap模板

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