передавая значения HTML для яваскрипта функций

Question

У меня есть на мой взгляд ng-repeat, и я хочу, чтобы передать объект от моего ng-repeat к javascript функции, но когда я пытаюсь отобразить его на консоли это дает мне undefined.

Вот мой HTML:

<!-- Panel --> 
<div class="row"> 
    <div class="col-lg-12"> 
    <div class="panel panel-primary"> 
     <div class="panel-heading"> 
     {{card}} 
     </div> 
     <!-- /.panel-heading --> 
     <div class="panel-body"> 


     <div id="nvd3-container" class="md-card" style="overflow-x: auto" ng-if="dataloaded0"> 

      <md-card-content id="nvd3-scrollable-content" style="width: {{width}}px; height: 350px;"> 
      <md-tabs md-dynamic-height="" md-border-bottom=""> 
       <md-tab ng-repeat="pu in selectedKpi" label="{{pu.dprdProuNr}}"> 

       <md-content class="md-padding"> 
        <div class="row"> 
        <div class="col-md-6"> 
         {{pu.item1}} 
         {{pu.item2}} 
        </div> 
        </div> 
       </md-content> 
       </md-tab> 
      </md-tabs> 
      </md-card-content> 
     </div> 
     </div> 
     <!-- /.panel-body --> 
     <a href="" ng-click="footerLinkClicked(pu)"> 
     <div class="panel-footer"> 
      <span class="pull-left">Trend</span> 
      <span 
             class="pull-right"> 
      <i class="fa fa-arrow-circle-right"></i> 
      </span> 
      <div class="clearfix"></div> 
     </div> 
     </a> 
    </div> 
    </div> 
</div> 

<!-- /.panel --> 

Вот мой JS файл, который возвращает неопределенное значение:

angular.module('App') 
    .directive('KpiParameter', function() { 
     return { 
      restrict: 'E', 
      templateUrl: 'app/kpi/kpi-parameter/kpi-parameter.html', 

      scope: { 
       card: '=', 
       kpiParamCallback: '&', 
       selectedProductionUnit: '<' 

      }, 

      controller: function($scope, $rootScope, KpiChartFactory, $filter) { 


       console.log("!???????"); 
       console.log($scope.selectedProductionUnit); 


       $scope.$watch('selectedProductionUnit', function() { 
        console.log($scope.selectedProductionUnit); 
        console.log("Changed"); 
        KpiParamUpdated(); 
        $scope.kpiParamCallback({ 
         selectedProductionUnit: $scope.productionUnitDefault 
        }); 

       }, true); 


       function KpiParamUpdated() { 
        console.log("KPiParamUpdated"); 
        console.log($scope.selectedProductionUnit); 
        $scope.dataloaded0 = true; 


        KpiChartFactory.get({ pu: $scope.selectedProductionUnit }, function(data) { 
         $scope.selectedKpi = data; 
         console.log($scope.selectedKpi); 


         $rootScope.$broadcast('kpiParams', $scope.selectedKpi); 
        }); 

       } 


       $scope.footerLinkClicked = function(pu) { 

        console.log("parameters received :"); 
        console.log(pu); 


       } 


      }, 
      controllerAs: "KpiPCtrl" 
     }; 
    }); 

Есть ли у вас какие-либо идеи, почему? Мне нужно определить его также в моем js-файле?

Answer 1

Как найти в docs из AngularMaterial, вы можете только добиться того, что вы хотите сделать с помощью md-on-select

Атрибуты

ПараметрТипОписание

• метка строка Необязательный атрибут, чтобы указать простую строку в качестве вкладки
• нг-инвалидов булево Если присутствует и выражение для truthy, инвалидов выбора вкладки.
• md-on-deselect выражение Выражение, которое будет оцениваться после того, как вкладка была отменена.
• md-on-select выражение Выражение, которое будет оцениваться после выбора вкладки.
• md-active boolean Когда true, устанавливает активную вкладку. Примечание. Одновременно может быть только одна активная вкладка.

Примечание: Это событие немного отличается от нг-клик, в том, что, если вкладка уже выбрана, а затем щелкнул, событие не срабатывает.

Answer 2

Ваш звонок footerLinkClicked() не имеет способа узнать, какой pu использовать, если вы не сообщите, какой из них использовать. И поскольку он находится вне вашего ng-repeat, нет слишком простого способа сделать это.

md-tabs имеет атрибут md-selected, который позволяет сохранять текущий выбранный индекс в переменной. Так если предположить, что selectedKpi является массивом (или массив типа), вы можете сделать это:

<md-tabs md-dynamic-height="" md-border-bottom="" md-selected="selectedTab"> 

и это:

<a href="" ng-click="footerLinkClicked(selectedKpi[selectedTab])"> 

и вы должны быть все готово.