Question

我已经写了一个应该模仿AngularJS-DataTable的指令。在这种情况下，我需要在最后<td>上执行一些功能，因为它们是按钮。我不想将这些函数传递给指令，以使指令尽可能独立。

所以在这种情况下，当我指定＆＃34;可渲染＆＃34;关于数据和＆＃34;渲染＆＃34;函数，如果它有一个ng-click，我需要在控制器中定义的那个函数被执行，但当我点击按钮时，没有任何反应。

这是我控制器中的数据，功能＆＃34; print（）＆＃34;我需要从指令

调用

$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);
              });

        });
    }
  };
}]);

Answer 1

如果你正在寻找最后一个td，请稍微使用你的模板以使用$ last：

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

Answer 2

做这样的事情绑定你的功能

 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>

在指令范围内链接控制器范围的功能

2 个答案: