将自定义指令添加到已具有角度指令的现有输入[ng-model / ng-required]

Question

我想使用用ng-model和ng-required修饰的标准输入控件，然后添加我自己的自定义属性指令，为控件提供uib-typeahead功能。

我用这个链接让我的指令部分工作。

Add directives from directive in AngularJS

PLUNKR - The Version 2 of the directive does not work correctly with ng-model

我的指令确实添加了预先输入功能，但效果很好，但是在选择项目后，它并没有将模型绑定到控件上。

我有两个版本的指令。

版本1 ：是一个元素样式指令，我已经成功使用了一段时间，但是当我不想对输入元素进行更多控制时，它就失败了，尤其是当我想使用ng-required ='true'和其他ng-message指令时。

版本2 ：是一个属性样式指令，我接受了这个，因为我觉得最好只添加我想要的任何标准HTML的typeahead功能，可以选择使用{{1} }，ng-required='true'等...

虽然此指令主要起作用，但它与ng-model无法正确交互，我不确定如何使其正常工作

ng-model

这两张图片展示了部分问题，可能更适合使用上面的PLUNKR进行测试

Answer 1

我最初尝试动态添加验证程序到您的wk-location-suggest-new指令，方法是在输入元素上结合blur＆＃39; {ngModel { {1}}方法;但是我不知道究竟是什么阻止了事件发生。

因此，我转向另一个指令$setValidity并稍微调整一下以适应所需的行为。

  

在那里，我注意到你错过了几件事：

     

  
• 首先，为了使表单元素 glue 与表单本身（在您的情况下为wk-location-suggest-old），并使用{{ 1}}，元素（指令模板中的 ）需要名称。
  
• 其次，wkProfileCompany（或ng-model）只有在作为属性添加到指令模板中的元素时才能使用表单，不指令编译到包含元素的模板。
  

指令定义

您可能已经注意到，我已经将外部范围内的两个属性传递给指令的内部范围，即：

• 输入元素的ng-required
• 和required标志，用于指定输入是否为必需。

name

HTML

最后，您可以在HTML中使用tweaked指令：

isRequired

Plunker

更新

.directive('wkLocationSuggestOld', [function () { return { restrict: 'E', require: '?ngModel', scope: { name: '@', // <== isRequired: '=' // <== }, template: '<input name="{{name}}" type="text" class="{{innerClass}}" ng-model="innerModel"' + ' ng-change="onChange()" uib-typeahead="location as row.location for row in typeAhead($viewValue)" ' + ' typeahead-wait-ms="750" typeahead-on-select="onSelectInternal($item, $model, $label)" ' + ' typeahead-min-length="2" typeahead-focus-first="true" ' + ' ng-required="isRequired">', // <== added ng-required here controller: 'LocationSuggestController', link: function (scope, element, attrs, ngModel) { if (!ngModel) { return; } ... }]) 未在<wk-location-suggest-old class="form-control" type="text" name="location2" ng-model="location2" is-required="true"></wk-location-suggest-old> 指令中正确绑定到提供的值（ ie ng-model ）的一个可能原因是您要替换整个wk-location-suggest-new元素，其中包含编译的新自定义location3元素，其中已隔离 DOM指令本身。

由于指令DOM具有隔离范围，因此范围完全不了解scope，因为wk-location-suggest-new（和所有其他位置值）是在location3的范围内定义，而不是指令本身的范围;因此，您最终会将输入的值绑定到location3属性。

MainCtrl

Answer 2

您需要在setTimout()中更新您的模型，如下所示，因为指令中有一个独立的范围。

setTimeout(function () {
                    scope.$apply(function () {
                        scope.location3 = 'Your selected value'
                    });
}, 2000);

或者，您也可以使用$timeout服务来获得相同的结果。