angularjs 指令中的可操作性 - 渲染具有 ng-click 的锚点答案

【问题标题】：handsontable in an angularjs directive - render an anchor that has an ng-clickangularjs 指令中的可操作性 - 渲染具有 ng-click 的锚点
【发布时间】：2015-03-10 14:42:49
【问题描述】：

所以我使用 Handsontable 来渲染网格。（是的，我没有使用 ngHandsontable。我开始使用它但遇到了问题，所以我只使用 angularjs 指令渲染 Handsontable。）

我想要一列包含一个锚标记。

我希望锚标记具有 angularjs ng-click 指令。

一切都正确呈现，但 ng-click 被不调用。

这是我的例子。

var APP = angular.module('APP', ['controllers']);

angular.module('controllers',[])
.controller('testController', function ($scope) {
    $scope.doNgClick = function() {
        alert('ng-click');  
        // console.log('ng-click');  
    };
    $scope.simple = [
        {
            test: "<a href='javascript:void(0);' ng-click='doNgClick()'>Test</a>"
            // test: "<a ng-click='doNgClick()'>Test</a>"
        }
    ];
});

APP.directive('htable',function($compile) {
    var directive = {};
    directive.restrict = 'A';
    directive.scope = {
        data : '='
    };
    directive.link = function(scope,element,attrs) {
        var container = $(element);
        // var safeHtmlRenderer = function (instance, td, row, col, prop, value, cellProperties) {
        //     var escaped = Handsontable.helper.stringify(value);
        //     td.innerHTML = escaped;
        //     return td;
        // };        
        var settings = {
            data: scope.data,
            readOnly: true,
            colHeaders: ['Link'],
            columns: [
                {   
                    data: "test",
                    renderer: "html", 
                    // renderer: safeHtmlRenderer,
                    readyOnly: true
                }
            ]
        };
        var hot = new Handsontable( container[0], settings );
        hot.render();
        // console.log(element.html());
        // $compile(element.contents())(scope);
    };//--end of link function
    return directive;
});

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="//handsontable.com/dist/handsontable.full.css">
  </head>

  <body>

    <div ng-app="APP">
        <div ng-controller="testController">
            <div htable data="simple"></div>
        </div
    </div>

    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
    
    <script src="//handsontable.com/dist/handsontable.full.js"></script>

  </body>

</html>

【问题讨论】：

标签： angularjs angularjs-directive handsontable

【解决方案1】：

经过大量阅读和挖掘，这是我自己的答案。

//-- With help from the following:
//--
//-- http://stackoverflow.com/questions/18364208/dynamic-binding-of-ng-click
//-- http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-3-isolate-scope-and-function-parameters
//--

var APP = angular.module('APP', ['controllers']);

angular.module('controllers',[])
.controller('testController', function ($scope) {
    $scope.click = function(msg) {
        console.log('ctrl_doNgClick: ng-click: msg: '+msg);  
    };
    $scope.simple = [
        {
            test: "<a href='javascript:void(0);' ng-click='dir_ctrl_click(\"blah1,blah1\")'>Test 1</a>"
        },
        {
            test: "<a href='javascript:void(0);' ng-click='doClick(\"blah2,blah2\")'>Test 2</a>"
        },
        {
            test: "<a href='javascript:void(0);' ng-click='doClick(\"blah3,blah3\")'>Test 3</a>"
        }
    ];
});

APP.directive('htable',function($compile) {
    var directive = {};
    directive.restrict = 'A';
    directive.scope = {
        data  : '=',
        click : '&'
    };
    directive.controller = function($scope) {
        $scope.dir_ctrl_click = function( msg ) {
            console.log('controller: dir_ctrl_click: click via the directive controller method');
            $scope.click()(msg);
        };
    };
    directive.link = function(scope,element,attrs) {
        var container = $(element);
        scope.doClick = function(msg) {
            console.log('link: doClick: click via the directive link method');
            scope.click()(msg);
        };
        var linkHtmlRenderer = function (instance, td, row, col, prop, value, cellProperties) {
            //-- here is the magic that works
            //-- the method, in ng-click, must either be defined here in the link method or in the controller method (the example data contains both)
            var el = angular.element(td);
            el.html($compile(value)(scope));
            return el;
        };        
        var settings = {
            data: scope.data,
            readOnly: true,
            colHeaders: ['Link'],
            columns: [
                {   
                    data      : "test",
                    renderer  : linkHtmlRenderer,
                    readyOnly : true
                }
            ]
        };
        var hot = new Handsontable( container[0], settings );
        // hot.render();
    };//--end of link function
    return directive;
});

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="http://handsontable.com/dist/handsontable.full.css">
  </head>

  <body>

    <div ng-app="APP">
        <div ng-controller="testController">
            <div htable data="simple" click="click"></div>
        </div
    </div>

    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
    
    <script src="http://handsontable.com/dist/handsontable.full.js"></script>

    
  </body>

</html>

【讨论】：

@hobbyman，我正在为the same issue 苦苦挣扎，但我所有努力使其成为有角度的（ngHandsontable）都失败了。你知道让它在没有像你一样写自己的桌子的情况下以角度工作的方法吗？我试过 href=""，绑定 onmousedown stopPropagation abd preventDefault 但没有成功