实现自动完成不适用于角度答案

【问题标题】：materialize autocomplete not working with angular实现自动完成不适用于角度
【发布时间】：2016-10-28 09:04:23
【问题描述】：

当我从 home.html 中删除 materialize.min.js 时，自动完成工作。是具体化问题还是我做错了什么？

home.html

<!DOCTYPE html>
<html ng-app="timeTracker">
    <head>
        <title>TimeTracker</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <!--Import Google Icon Font-->
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="materialize/css/materialize.min.css"  media="screen,projection"/>
        <link type="text/css" rel="stylesheet" href="stylesheets/style.css" />
        <link href="/src/css/angular-datepicker.css" rel="stylesheet" type="text/css" />

    </head>
    <body ng-controller="containerCtrl" >

        <div class="container" id="mainContainer">
        <div ng-view></div>         

        </div><!--- container -->
        <footer>
            <br />
        </footer>
        <!--Import jQuery before materialize.js-->

      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
      <script type="text/javascript" src="materialize/js/materialize.min.js"></script>

      <script type="text/javascript" src="/angular.js"></script>
     <script type="text/javascript" src="/angular-resource.js"></script>
     <script type="text/javascript" src="/angular-route.js"></script>
      <script type="text/javascript" src="javascripts/home.js"></script>

    </body>
</html>

这里是 taskView.html。

                <div class="input-field col s3">
                    <input id="input_text" type="text" name="category" ng-model="newTask.category"
                     class="autocomplete" ui-items="categories" auto-complete >
                    <label for="input_text">Category...</    
                </div>

home.js

var app = angular.module("timeTracker", ["ngResource", "ngRoute"])
.controller("containerCtrl") {
    /**
     * Autocomplete
     */
    $scope.categories = [
        "Test", "Configuration", "Install" ];

})
.directive('autoComplete', function($timeout) {
    return function(scope, element, attrs) {

        console.log(scope[attrs.uiItems]);
        element.autocomplete({
            source: scope[attrs.uiItems],
            select: function() {
                $timeout(function() {
                    element.trigger('input');
                }, 0);
            }
        });
    };
});

scope[attrs.uiItems] 记录 $scope.categories 属性。实现版本。 97.7

【问题讨论】：

标签： jquery angularjs materialize

【解决方案1】：

我知道我的回答迟了，但对于那些会来这里的人......

在我决定使用 materializeCss 自动完成而不是 jquery-ui 之前，我遇到了同样的问题

HTML

<div class="input-field col s3">
     <input type="text" name="category" ng-model="newTask.category" class="autocomplete" auto-complete>
      <label for="input_text">Category...</label>    
</div>

指令

.directive("autoComplete", function () {
  return  {
    restrict: 'A',
    scope: true,
    link: function($scope, elem, attr) {
            elem.autocomplete({ data: $scope.newTask.category });
    }
};});

$scope.newTask.category 数据应如下所示：

{'category1': null, 'category2': null, 'category3': null, 'category4': null}

【讨论】：

【解决方案2】：

您同时使用 Jquery-UI 和 Materialize，两者都有自动完成功能，并且可能相互冲突。尝试删除任何一个，然后重试。请记住，它们有不同的语法。

【讨论】：

Op 以“当我从 home.html 自动完成作品中删除 materialize.min.js 时”开始问题。你并没有真正解决这个问题。但是你从双重用法中得到了一个有效的观点。您应该在这一点上扩展您的答案，因为问题归结为这一点。