在angularjs指令handsontable - 渲染，有一个NG-点击一个锚 [英] handsontable in an angularjs directive - render an anchor that has an ng-click
本文介绍了在angularjs指令handsontable - 渲染，有一个NG-点击一个锚的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我使用Handsontable呈现一个网格。 （是的，我没有使用ngHandsontable。我开始了这一点，但遇到了问题，所以我从angularjs指令只是渲染Handsontable去了。）
我想一列举行一个锚标记。
我想锚标记有angularjs NG单击指令。
一切正确呈现，但NG-点击是的不可以调用。
下面是我的榜样。
\r
\r\r
\r VAR APP = angular.module（'APP'，['控制器']） ;\r
\r
angular.module（控制器，[]）\r
.controller（'的TestController'，函数（$范围）{\r
$ scope.doNgClick =功能（）{\r
警报（'NG-点击'）;\r
//执行console.log（'NG-点击'）;\r
};\r
$ scope.simple = [\r
{\r
试验：＆所述; A HREF ='的javascript：无效（0）; NG-点击='doNgClick（）'＆GT;测试与LT; / A＆gt;中\r
//测试：＆下;一个纳克点击='doNgClick（）'＆GT;试验＆下; / A＆gt;中\r
}\r
];\r
}）;\r
\r
APP.directive（'htable'，函数（$编译）{\r
var命令= {};\r
directive.restrict ='A';\r
directive.scope = {\r
数据：'='\r
};\r
directive.link =功能（范围，元素，ATTRS）{\r
VAR容器= $（元）;\r
// VAR safeHtmlRenderer =功能（例如，TD，行，列，道具，价值，cellProperties）{\r
//无功逃脱= Handsontable.helper.stringify（值）;\r
// td.innerHTML =逃脱;\r
//返回运输署;\r
//};\r
VAR设置= {\r
数据：scope.data，\r
readOnly的：真实，\r
colHeaders：['链接']，\r
列： [\r
{\r
数据：测试，\r
渲染：HTML，\r
//渲染：safeHtmlRenderer，\r
readyOnly：真\r
}\r
]\r
};\r
VAR热=新Handsontable（容器[0]，设置）;\r
hot.render（）;\r
//的console.log（element.html（））;\r
// $编译（element.contents（））（范围）;\r
}; // - 连接功能的结束\r
返回指令;\r
}）; \r
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML和GT;\r
\r
＆LT; HEAD＆GT;\r
＆LT;链接rel =stylesheet属性HREF =// handsontable.com/dist/handsontable.full.css\">\r
＆LT; /头＆GT;\r
\r
＆LT;身体GT;\r
\r
＆LT; DIV NG-应用=APP＆GT;\r
＆LT; DIV NG控制器=的TestController＆GT;\r
＆LT; DIV htable数据=简单＆GT;＆LT; / DIV＆GT;\r
＆LT; / DIV\r
＆LT; / DIV＆GT;\r
\r
＆LT;脚本的src =// code.jquery.com / jQuery的-1.11.1.min.js＆GT;＆LT; / SCRIPT＆GT;\r
\r
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js\"></script>\r
\r
＆LT;脚本的src =// handsontable.com/dist/handsontable.full.js\"></script>\r
\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT; \r
解决方案
大量的阅读和挖掘这里后，我自己的答案。
\r
\r\r
\r // - 从以下帮助：\r
// - \r
// - http://stackoverflow.com/questions/18364208/dynamic-binding-of-ng-click\r
// - http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-3-isolate-scope-and-function-parameters\r
// - \r
\r
VAR APP = angular.module（'APP'，['控制器']）;\r
\r
angular.module（控制器，[]）\r
.controller（'的TestController'，函数（$范围）{\r
$ scope.click =功能（MSG）{\r
的console.log（'ctrl_doNgClick：NG-点击：消息：'+味精）;\r
};\r
$ scope.simple = [\r
{\r
试验：＆所述; A HREF ='的javascript：无效（0）;纳克点击='dir_ctrl_click（\\blah1，blah1 \\）'＆GT;试验1＆下; / A＆gt;中\r
}，\r
{\r
试验：＆所述; A HREF ='的javascript：无效（0）;纳克点击='doClick（\\blah2，blah2 \\）'＆GT;试验2'; / A＆gt;中\r
}，\r
{\r
试验：＆所述; A HREF ='的javascript：无效（0）;纳克点击='doClick（\\blah3，blah3 \\）'＆GT;试验3'; / A＆gt;中\r
}\r
];\r
}）;\r
\r
APP.directive（'htable'，函数（$编译）{\r
var命令= {};\r
directive.restrict ='A';\r
directive.scope = {\r
数据：=，\r
点击：'和;'\r
};\r
directive.controller =功能（$范围）{\r
$ scope.dir_ctrl_click =功能（MSG）{\r
的console.log（'控制器：dir_ctrl_click：通过指令控制方法点击）;\r
$ scope.click（）（MSG）;\r
};\r
};\r
directive.link =功能（范围，元素，ATTRS）{\r
VAR容器= $（元）;\r
scope.doClick =函数（MSG）{\r
的console.log（链接：doClick：通过指令链接方式点击'）;\r
scope.click（）（MSG）;\r
};\r
VAR linkHtmlRenderer =功能（例如，TD，行，列，道具，价值，cellProperties）{\r
// - 这里是工作的魔术\r
// - 的方法中，以ng单击，必须或者在此定义中的连结方法或在控制器方法（例如数据同时包含）\r
VAR EL = angular.element（TD）;\r
el.html（$编译（值）（范围））;\r
返回埃尔;\r
};\r
VAR设置= {\r
数据：scope.data，\r
readOnly的：真实，\r
colHeaders：['链接']，\r
列： [\r
{\r
数据：测试，\r
渲染：linkHtmlRenderer，\r
readyOnly：真\r
}\r
]\r
};\r
VAR热=新Handsontable（容器[0]，设置）;\r
// hot.render（）;\r
}; // - 连接功能的结束\r
返回指令;\r
}）; \r
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML和GT;\r
\r
＆LT; HEAD＆GT;\r
＆LT;链接rel =stylesheet属性HREF =http://handsontable.com/dist/handsontable.full.css＆GT;\r
＆LT; /头＆GT;\r
\r
＆LT;身体GT;\r
\r
＆LT; DIV NG-应用=APP＆GT;\r
＆LT; DIV NG控制器=的TestController＆GT;\r
＆LT; DIV htable数据=简单的点击=点击＆GT;＆LT; / DIV＆GT;\r
＆LT; / DIV\r
＆LT; / DIV＆GT;\r
\r
＆LT;脚本的src =// code.jquery.com / jQuery的-1.11.1.min.js＆GT;＆LT; / SCRIPT＆GT;\r
\r
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js\"></script>\r
\r
＆所述; SCRIPT SRC =http://handsontable.com/dist/handsontable.full.js＆GT;＆下; /脚本＆GT;\r
\r
\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT; \r
So I'm using Handsontable to render a grid. (Yes, I am NOT using the ngHandsontable. I started out with that but ran into problems and so I went with just rendering a Handsontable from an angularjs directive.)
I want one column to hold an anchor tag.
I want the anchor tag to have the angularjs ng-click directive.
Everything renders correctly but the ng-click is not called.
Here is my example.
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>
解决方案
After much reading and digging here is my own answer.
//-- 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指令handsontable - 渲染，有一个NG-点击一个锚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
