如何通过ng-click从另一个函数调用一个函数? [英] How to call a function from another function, with ng-click?
问题描述
var vm = this;
vm.dt_data = [];
vm.item = {};
vm.edit = edit;
vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('initComplete', function() {
$timeout(function() {
$compile($('.dt-uikit .md-input'))($scope);
})
})
.withPaginationType('full_numbers')
.withOption('createdRow', function (row, data, dataIndex) {
$compile(angular.element(row).contents())($scope);
})
.withOption('ajax', {
dataSrc: function(json) {
json['draw']=1
json['recordsFiltered'] = json.records.length
json['recordsTotal'] =json.records.length
console.log(json)
return json.records;
},
url: 'http://localhost:808/sistemadrp/public/ws/usuarios',
type: 'GET',
})
//.withDataProp('records')
.withOption('processing', true)
.withOption('serverSide', true);
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('Id'),
DTColumnBuilder.newColumn('usuario').withTitle('Usuario'),
DTColumnBuilder.newColumn('nombre').withTitle('Nombre'),
DTColumnBuilder.newColumn('email').withTitle('Email'),
DTColumnBuilder.newColumn('telefono').withTitle('Telefono'),
DTColumnBuilder.newColumn('estado').withTitle('Estado'),
DTColumnBuilder.newColumn('created_at').withTitle('Creado'),
DTColumnBuilder.newColumn(null).withTitle('Acciones').notSortable().renderWith(function(data,type,full){
vm.item[data.id] = data;
return ' <a href="#" data-uk-modal="{target:\'#modal_header_footer\'}" ng-click="showCase.edit(showCase.item[' + data.id + '])">'+
' <i class="md-icon material-icons md-bg-light-blue-900 uk-text-contrast"></i></a>'+
' <a href="#" data-uk-modal="{target:\'#modal_header_footer_eliminar\'}" ng-click="showCase.edit(showCase.item[' + data.id + '])">'+
' <i class="md-icon material-icons md-bg-red-900 uk-text-contrast"></i></a>';
})
];
表格:
<div class="md-card-content" ng-controller="dt_default as showCase">
<table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="uk-table" cellspacing="0" width="100%">
</table></div>
在这里给出的答案是，我可以利用$ compile这样工作
With the answer I was given here to make use of $ compile already works this way
.withOption('createdRow', function (row, data, dataIndex) {
$compile(angular.element(row).contents())($scope);
})
现在，当单击按钮时，我什至调用模态，并命令对象使用ng-model
Now when clicking the button I even call a modal and I command the object to make use of the ng-model
感谢您的帮助，效果很好.
Thanks for the help, it works well.
推荐答案
EDIT: Added snippet for demonstrating the usage of $compile
-
在html中，只有
body标记用于初始化应用程序，而div则用于初始化控制器.
In the html there is only a
bodytag for initialising the app and a div for initialising the controller.
在foo控制器中，两个链接被创建为简单字符串，但分别具有两个ng-click，然后使用$ compile服务进行编译.然后将其结果附加到div中，将id创建为parent作为jQlite对象(此处很重要！)，因此，单击链接时，将执行其ng-click上的功能(请参见控制台). .这意味着AngularJS可以正确解释已编译的html.
In foo controller, two link are created as simple strings but with two ng-click respectively and then compiled with the $compile service. The result of that is then appended to the div which id is parent created as jQlite object (important aspect here!), so when the links are clicked the functions on their ng-click are executed (see console). It means AngularJS as interpreted properly the compiled html.
重要:此代码与代码之间的区别可能是您的renderWith只是将参数作为简单的html节点而不是 jQuery / jQlite 对象.如果是这种情况，您不能按照这种方式做您想做的事情.您可能需要为此找到解决方法.例如:您可以为DTColumnBuilder返回的对象的结果设置选择器(即id)，然后为html节点 $ compile 返回该html节点，就像我在代码段中显示的一样
IMPORTANT: The difference between this and your code may be that your renderWith just take the parameter as a simple html node and not a jQuery/jQlite object. If that's the case you can not do what you're trying to do this way. You probably will need to find a workaround for this. For example: you could set a selector (i.e.: an id) for the result of the object returned by the DTColumnBuilder and then $compile that html node the same way I show in the snippet.
原始帖子
您应该使用 $ compile 服务.像这样修改您的功能:
You should use the $compile service. Modify your function like this:
function actionsHtml(data, type, full, meta){
vm.usuario[data.id] = data;
var html = ' <a href="#" data-uk-modal="{target:\'#modal_header_footer\'}" ng-click="showCase.edit(showCase.usuario[' + data.id + '])"><i class="md-icon material-icons md-bg-light-blue-900 uk-text-contrast"></i></a>'+
' <a href="#" data-uk-modal="{target:\'#modal_header_footer_eliminar\'}"><i class="md-icon material-icons md-bg-red-900 uk-text-contrast"></i></a>';
return $compile(angular.element(html))($scope);
}
代码段
angular.module('myapp', [])
.controller('foo', function($scope, $compile) {
var html = "<a class='hand' ng-click='hello()'><strong>Hi</strong> <small>(Click Me and take a look at console)</small></a>" +
"<br/> <hr/>" +
"<a class='hand' ng-click='goodby()'><strong>Goodby</strong> <small>(Click Me and take a look at console)</small></a>";
/*
* important!! if you don't use the angular.element syntaxt below, and instead you just use
* 'document.getElementById('parent') = $compile(html)($scope)', for instance, it will be shown something like '[object], [object]'
*/
angular.element(document.getElementById('parent')).append($compile(html)($scope));
$scope.hello = function() {
console.log("Hi there!")
}
$scope.goodby = function() {
console.log("Goodby!")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style type="text/css">
.hand {
cursor: hand;
cursor: pointer;
}
</style>
<body ng-app="myapp">
<div ng-controller="foo">
<div id="parent"></div>
</div>
</body>
这篇关于如何通过ng-click从另一个函数调用一个函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
