2

此参考有助于使用 tag 制作指令“自动完成”。jQuery 自动完成 + AngularJS 的问题

但是，我有以下问题：

我知道为了在自动完成列表中选择后处理事件，应该使用 jqueryUI 提供的事件处理程序。

...
     link: function(scope, elem, attr, ctrl) {
                elem.autocomplete({
                        source: datasource,
                        select: function( event, ui ) {
                             console.log(ui.item.value); 
                             console.log(attrs.ngModel);
                             //but how can I change the value of this ngModel in scope?
                        }

                    });
     };

但是，在指令中，我如何影响该 ngModel 的值？我可以使用 attrs.ngModel 获取该 ngModel 的名称。（知道ng-model 的名称是动态的，我可以使用 ui.item.value 获取该值）

有人知道吗？非常感谢提前！

4

2 回答 2

3

不确定您是否已经在指令中定义了范围，但这是一个示例：

myApp.directive("myDirective", function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    scope: {
      ngModel: '='
    },
    link: function(scope, element, attrs) {
      // monitor plugin and set value to ngModel
      element.plugin({
        onChange: function(newValue) {
          scope.$apply(function() {
            scope.ngModel = newValue;
          });
        }
      });

      // monitor ngModel and set new value to element/plugin
      scope.$watch('ngModel', function(newValue, oldValue) {
        element.val(newValue);
      });
    }
  };
});
于 2013-04-04T09:56:28.333 回答
0

好的，在玩了这个例子几个小时之后（我只是在学习角度），我认为设置你需要的值如下：

ngModel.$setViewValue(elm.val());

特别是您的代码应如下所示：

require: 'ngModel',
 link: function(scope, elem, attr, ctrl) {
            elem.autocomplete({
                    source: datasource,
                    select: function( event, ui ) {
                         console.log(ui.item.value); 
                         console.log(attrs.ngModel);

                         ctrl.$setViewValue(elem.val());

                         //but how can I change the value of this ngModel in scope?
                    }

                });
 };

所以我测试了它的工作原理。

于 2014-07-08T22:25:50.073 回答