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

Question

In my view i have such code:

<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>

is it real to get node.Options.length, when i try to render header here:

<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>

and then if my node.Options are higher then 0 i do ng-class...

how could i pass variable to non-my directive template?

also i must pass there whole node object, so that i could edit it etc...

Answer 1

Every directive lives within a scope. I had a similar case where I wrote a common pager directive that pulls its details from the Controller scope. My templates are externalized, but this does not affect the functionality.

Directive usage:

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

Directive definition:

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

Controller:

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

Template code of templates/table-pager.html (snippet):

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

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

You can read more about AngularJS custom directives at http://tutorials.jenkov.com/angularjs/custom-directives.html

HTH