从指令调用控制器函数，参数未定义

Question

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>

我的控制器渲染功能正常，但参数未定义。

Answer 1

在 angularjs 中，如果您想将函数调用到指令中 参数必须作为对象传递。 使用此语法 {labelName:parameter}

你的解决方案一定是这样的

尝试这样改

element.data("ui-autocomplete")._renderItem = function(u, i){return scope.render({ul:u, item:i})}

从指令调用控制器函数，参数未定义

Call controller function from directive, parameter is undefined

jquery-ui

jquery-ui-autocomplete

angularjs