jQuery自动完成+AngularJS的问题?

  • 回答 (2)
  • 关注 (0)
  • 查看 (78)

我在我的页面上使AjgularJS,并且希望添加一个字段来使用jqueryui中的自动完成,并且autoComplete不触发Ajax调用。

我已经在没有角的页面上测试了脚本(ng-app和ng-控制器),它工作得很好,但是当我将脚本放在带有angularjs的页面上时,它就停止工作了。

jQuery脚本:

$(function () {

    $('#txtProduct').autocomplete({
        source: function (request, response) {

            alert(request.term);

        },
        minLength: 3,
        select: function (event, ui) {

        }
    });

});
  • 版本:AngularJS:1.0.2-JqueryUI:1.9.0

结论:必须在AngularJS的自定义指令中初始化来自jQueryUI的自动完成小部件,例如:

标记

<div ng-app="TestApp">
    <h2>index</h2>
    <div ng-controller="TestCtrl">

        <input type="text" auto-complete>ddd</input>

    </div>
</div>

角脚本

<script type="text/javascript">

    var app = angular.module('TestApp', []);

    function TestCtrl($scope) { }

    app.directive('autoComplete', function () {
        return function postLink(scope, iElement, iAttrs) {

            $(function () {
                $(iElement).autocomplete({
                    source: function (req, resp) {
                        alert(req.term);
                    }
                });
            });

        }
    });

</script>
楼主石乐志楼主石乐志提问于
efsdfarr网络工程师回答于

服务:

app.factory("AutoCompleteService", ["$http", function ($http) {
    return {
        search: function (term) {
            return $http.get("http://YourServiceUrl.com/" + term).then(function (response) {
                return response.data;
            });
        }
    };
}]);

指令:

app.directive("autocomplete", ["AutoCompleteService", function (AutoCompleteService) {
    return {
        restrict: "A",
        link: function (scope, elem, attr, ctrl) {
            elem.autocomplete({
                source: function (searchTerm, response) {
                    AutoCompleteService.search(searchTerm.term).then(function (autocompleteResults) {
                        response($.map(autocompleteResults, function (autocompleteResult) {
                            return {
                                label: autocompleteResult.YourDisplayProperty,
                                value: autocompleteResult 
                            }
                        }))
                    });
                },
                minLength: 3,
                select: function (event, selectedItem) {
                    // Do something with the selected item, e.g. 
                    scope.yourObject= selectedItem.item.value;
                    scope.$apply();
                    event.preventDefault();
                }
            });
        }
    };
}]);

html:

<input ng-model="YourObject" autocomplete />

回答过的其他问题

绝地求生外挂频发,是游戏开发者太菜还是外挂开发者太机智?

efsdfarr网络工程师
这个问题好,我来大致给你解释一下 其实游戏外挂有很多种,早期的时候其实内存修改挂比较流行,比如你有30发子弹,你找到游戏调用到的内存地址,并把它锁死或者修改成999999+,这样游戏程序每次都会自减1,但是就是不会到0,生命值和其他也是这样,这个时候的外挂是最好搞的,我记得当时很...... 展开详请

智能网优如何提升手游用户游戏体验?

efsdfarr网络工程师

游戏运营商接入智能网优后,智能网优会为玩家提供全网保障。不仅优化网络,还会发现和分析故障原因。玩家在进行多人对战游戏的时候,卡顿现象大大减少,游戏体验会更好。

如何实现深度强化学习(DQN)?

efsdfarr网络工程师
DQN算法流程 NIPS 2013版 📷 Nature 2015版 📷 两版的DQN都使用了经验池,而2015版的DQN增加了target-net,提高了算法稳定性。... 展开详请

沙龙代金券回收了,但是买了东西倒是退款啊?

efsdfarr网络工程师
已采纳

我觉得楼主如果遇到花了钱的同时使用了代金券的话,可以发一个工单说明情况,因为工单才是递交腾讯云工程师的,这边问答貌似就是我们几个活跃的在这边瞎BB来混个眼熟(顺便帮助别人)

如何在Go中清除终端屏幕?

efsdfarr网络工程师
已采纳
你必须为每个不同的操作系统定义一个清晰的方法,如下所示。当用户的操作系统不被支持时,它会发生混乱。 package main import ( "fmt" "os" "os/exec" "runtime" "time" ) var c...... 展开详请

腾讯云服务器是如何实现公网ip到私网ip的转换的?

efsdfarr网络工程师

扫码关注云+社区

领取腾讯云代金券