2017-01-06 2 views
0

Я написал директиву, которая должна эмулировать AngularJS-DataTable. В этом случае мне нужно выполнить некоторую функцию на последнем <td>, так как они являются кнопками. Я не хочу передавать функции директиве, чтобы сохранить директиву как можно более независимую.Ссылка на функцию из области действия контроллера в области директивы

В этом случае, когда я указываю «renderable» на данных и функцию «render», если он получил ng-click, мне нужна эта функция, определенная в контроллере, которая должна быть выполнена, но когда i Нажмите на кнопки, ничего не происходит.

Это данные, которые я имею в моем контроллере, с «печатью()» функции, что мне нужно позвонить из директивы

$scope.print = function(){ 
    console.log("It worked!"); 
}; 

$scope.tableData = { 
    data: data.response, 
    columns: [{ 
       title:"", 
       data: "priority", 
       renderable: true, 
       render: function(data){ 
        return "<span class='btn btn-xs fa fa-fw fa-angle-down' ng-click='lowerPriority()'></span>"; 
       } 
      }, 
      { 
       title: "Nome Servizio", 
       data: "title" 
      }, 
      { 
       title: "Descrizione", 
       data: "description", 
       renderable: true, 
       render: function(data, row){ 
        var html = "<div ng-click='print()'>"+row.sum+"</div>"; 
        return html; 
       } 
      }, 
     ], 
    } 

В моей странице я звоню

<smart-table data="tableData" ></smart-table> 

И тогда в моем шаблоне директивы

<tr ng-repeat="row in data.data | filter: search.value" repeat-done> 
    <td ng-repeat="cell in data.columns"> 
     <span ng-if="cell.renderable" ng-bind-html="trustHtml(cell.render(row[cell.data], row))"></span> 
     <span ng-if="!cell.renderable">{{row[cell.data]}}</span> 
    </td> 
</tr> 

Наконец, это моя директива

var smartTable = angular.module('smartTable', ['ngSanitize']); 

smartTable.directive('smartTable',['$compile', '$sce', '$templateRequest', function($compile, $sce, $templateRequest) { 
    return { 
    restrict: 'AE', 
    replace: true, 
    templateUrl: '/public/components/directives/smartTable.tpl.html', 
    link: function(scope, elem, attrs, parentScope) { 

     scope.trustHtml = function(data){ 
      var template = angular.element(data); 
      elem.append(template); 
      // $compile(angular.element(data))(scope); 
      return $sce.trustAsHtml(data); 
     }; 

     $templateRequest('/public/components/directives/smartTable.tpl.html').then(function(html){ 

      console.log(scope); 
      scope.$watch(attrs.data, function(elemasd) { 
       var template = angular.element(html); 
       elem.append(template); 
       elem.html(html); 
       scope.data = scope[attrs.data]; 
       $compile(elem)(scope); 
       }); 

     }); 
    } 
    }; 
}]); 
+0

сделайте скрипку/plnkr, если возможно – tanmay

+0

Я пытался, человек в возрасте, чтобы получить только http://plnkr.co/edit/VMDdSlHHPQFzFT8vDyYz. Но это даже не показывает таблицу –

ответ

0

Атер шаблона слегка использовать $ в прошлом, если вы ищете последний тд:

<td ng-if="$last" ng-click="vm.print()"></td> 
+0

Это не то, что я спросил, извините, если я не был ясен. Моя проблема в том, что в выделенной ячейке я получил «ng-click», который не работает. Это не вызов функции печати моего контроллера –

0

Сделайте что-нибудь, как это связать вашу функцию

smartTable.directive('smartTable',['$compile', '$sce', '$templateRequest', function($compile, $sce, $templateRequest) { 
     return { 
     restrict: 'AE', 
     replace: true, 
     scope: {data: '=', 
       print: '&'}, 
     templateUrl: '/public/components/directives/smartTable.tpl.html', 
     link: function(scope, elem, attrs, parentScope) { 

      scope.trustHtml = function(data){ 
       var template = angular.element(data); 
       elem.append(template); 
       // $compile(angular.element(data))(scope); 
       return $sce.trustAsHtml(data); 
      }; 

      $templateRequest('/public/components/directives/smartTable.tpl.html').then(function(html){ 

       console.log(scope); 
       scope.$watch(attrs.data, function(elemasd) { 
        var template = angular.element(html); 
        elem.append(template); 
        elem.html(html); 
        scope.data = scope[attrs.data]; 
        $compile(elem)(scope); 
        }); 

      }); 
     } 
     }; 
    }]); 

HTML

<smart-table data="tableData" print="print"></smart-table> 
+0

Мне нужно, чтобы директива была не привязана к контроллеру. Мне нужно повторно использовать эту директиву в разных контроллерах, и каждый из них имеет другую ситуацию. У некоторых контроллеров нет кнопок/функций, некоторые из них получили 2-3. Мне нужно, чтобы он был как можно более независимым –

Смежные вопросы