以编程方式添加指令 uib-typeahead

Question

我希望创建一个将uib-typeahead指令添加到自身中的指令。

像这样：

angular.module('app').directive('myOptions', ['$interpolate', '$compile', '$parse', 
function($interpolate, $compile, $parse){
return{
restrict: 'A',
link: function(scope, element){
scope.options = ['aa', 'ab', 'ac'];
element.attr('uib-typeahead', 'option in options');
}
};
}]);

我知道这行不通，因为"选项中的选项">只是一个字符串。我尝试过$compile，$interpolate和$parse，但没有任何运气。我可能只是没有正确使用它们。

这个想法是我应该能够将my-directive添加到输入元素中，然后选项会自动放入 typeahead 的作用域中。

任何帮助，不胜感激。

Answer 1

您可以通过指定template和设置replace: true来实现所需的行为：

.directive('myOptions', [
function () {
return {
restrict: 'A',
template: '<input type="text" uib-typeahead="state for state in states">',
replace: true,
controller: function ($scope) {
$scope.states = ['Alabama', 'Alaska'];
}
};
}])

例

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo')
.directive('myOptions', ['$interpolate', '$compile', '$parse',
function ($interpolate, $compile, $parse) {
return {
restrict: 'A',
template: '<input type="text" uib-typeahead="state for state in states">',
replace: true,
//require: ['ngModel', 'uibTypeahead'],
controller: function ($scope) {
$scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];;
}
};
}])
.controller('TypeaheadCtrl', function ($scope) {
$scope.selected = undefined;

});

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


<div class='container-fluid typeahead-demo' ng-app="ui.bootstrap.demo" ng-controller="TypeaheadCtrl">
<h4>Example</h4>
<pre>Model: {{selected | json}}</pre>
<input type="text" my-options  ng-model="selected">
</div>