个人中心
gpt4 book ai didi

angularjs - 在 angularjs 指令中可手动操作 - 渲染具有 ng-click 的 anchor

转载 作者：行者123 更新时间：2023-12-03 06:55:13 24 4
gpt4 key购买 nike

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

我想要一列包含 anchor 标记。

我希望 anchor 标记具有 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>

最佳答案

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

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

关于angularjs - 在 angularjs 指令中可手动操作 - 渲染具有 ng-click 的 anchor ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27908659/

24 4 0
文章推荐： ruby-on-rails - 如何让 ActiveRecord 在 Ruby on Rails 中显示下一个 id(最后一个 + 1)？
文章推荐： 带连接表的 Hibernate 一对多 - 重复插入
文章推荐： recursion - 使用 Inno Setup PreProcessor 获取源路径及其子目录的文件和大小
文章推荐： mercurial - 强制 mq 仅在草稿上工作
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com