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');
        }
    };
}]);

我知道这不会奏效，因为选项＆＃39; 中的＆＃39;选项只是一个字符串。我尝试了$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>

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

1 个答案: