angular.module('apps', []).controller('myController', ['$scope',
function($scope) {
$scope.data = [{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "jqueryui_32x32.png"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "sizzlejs_32x32.png"
}
];
$scope.render = function(ul, item) {
console.log(ul, item);
}
}
]).directive('jquiAutocomplete', [
function() {
return {
restrict: 'A',
scope: {
'source' : '=',
'render': '&'
},
link: function(scope, element, attributes) {
var option = {
source: scope.source
};
element.autocomplete(option);
if (!!attributes.render) {
element.data("ui-autocomplete")._renderItem = scope.render;
}
}
}
}
]);
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.20/angular-ui-router.min.js"></script>
<div ng-app="apps">
<div ng-controller="myController">
<input type="text" name="test" id="test" data-jqui-autocomplete data-source='data' data-render="render(ul, item)" ng-model="test" required>
</div>
</div>
我的控制器渲染功能正常工作,但参数未定义。
答案 0 :(得分:0)
如果要在指令中调用函数,请在angularjs中必须将参数作为对象传递。使用这种语法{labelName:parameter}
您的解决方案必须是这样
尝试以这种方式进行更改。
element.data("ui-autocomplete")._renderItem = function(u, i){return scope.render({ul:u, item:i})}