Question

我使用AngularJS做了我的第一步：

我正在尝试向输入添加自动提示功能。我在body-tag中声明了ng-app = app和controller = QueryBuilderCtrl。现在我收到错误 TypeError：iElement.autocomplete不是函数

你有给我的小费吗？

var app = angular.module('app', ['ngSanitize', 'queryBuilder', 'ngAnimate', 'ui.bootstrap']);
app.controller('QueryBuilderCtrl', ['$scope',
  function($scope) {
    var data = '{"group": {"operator": "AND","rules": []}}';

    $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];

    function htmlEntities(str) {
      return String(str).replace(/</g, '&lt;').replace(/>/g, '&gt;');
    }

    function computed(group) {
      if (!group) return "";
      for (var str = "(", i = 0; i < group.rules.length; i++) {
        i > 0 && (str += " " + group.operator + " ");
        str += group.rules[i].group ?
          computed(group.rules[i].group) :
          group.rules[i].field + " " + htmlEntities(group.rules[i].condition) + " " + group.rules[i].data;
      }

      return str + ")";
    }

    $scope.json = null;

    $scope.filter = JSON.parse(data);

    $scope.$watch('filter', function(newValue) {
      $scope.json = JSON.stringify(newValue, null, 2);
      $scope.output = computed(newValue.group);
    }, true);



    $scope.builder = true;
    $scope.toggleBuilder = function() {
      $scope.builder = $scope.builder === false ? true : false;
    };

    $scope.myOptions = ["AND", "OR"];
    $scope.myModel = "AND";

    $scope.$watch('myModel', function(v) {
      console.log('changed', v);
    });
    $scope.$watch('myModel.group.operator', function(v) {
      console.log('jetzt', v);
    });

  }
]);


var queryBuilder = angular.module('queryBuilder', []);
queryBuilder.directive('queryBuilder', ['$compile',
    function($compile) {
      return {
        restrict: 'E',
        scope: {
          group: '='
        },
        templateUrl: '/queryBuilderDirective.html',
        compile: function(element, attrs) {
          var content, directive;
          content = element.contents().remove();
          return function(scope, element, attrs) {

            scope.fields = [{
              name: 'Title'
            }, {
              name: 'Abstract'
            }, {
              name: 'Age'
            }, {
              name: 'Date'
            }, {
              name: 'In Progress'
            }];

            scope.conditions = [{
              name: 'contains'
            }, {
              name: 'doesn´t contain'
            }];

            scope.addCondition = function() {
              scope.group.rules.push({
                condition: ':',
                field: 'Title',
                data: ''
              });
            };

            scope.removeCondition = function(index) {
              scope.group.rules.splice(index, 1);
            };

            scope.addGroup = function() {
              scope.group.rules.push({
                group: {
                  operator: 'AND',
                  rules: []
                }
              });
            };

            scope.removeGroup = function() {
              "group" in scope.$parent && scope.$parent.group.rules.splice(scope.$parent.$index, 1);
            };


            directive || (directive = $compile(content));

            element.append(directive(scope, function($compile) {
              return $compile;
            }));
          }
        }
      }
    }
  ])
  .directive('autoComplete', function($timeout) {
    return function(scope, iElement, iAttrs) {
      iElement.autocomplete({
        source: scope[iAttrs.uiItems],
        select: function() {
          $timeout(function() {
            iElement.trigger('input');
          }, 0);
        }
      });
    };
  });

<body ng-app="app" ng-controller="QueryBuilderCtrl">
  <input auto-complete ui-items="names" ng-model="selected">selected = {{selected}}
</body>

AngularJs版本1.3.14的问题

0 个答案: