如何在angularjs自定义指令中使用ng选项和ng模型

qpgpyjmq  于 2021-09-29  发布在  Java
关注(0)|答案(0)|浏览(165)

我试图从html代码中封装一些下拉列表,下面是我的html代码

<custom-dropdown function="foo" data="{{application}}" target="toBeUsedLater">                             
</custom-dropdown>

这是我的customdropdown自定义指令代码:

'use strict';

angular.module('sample')
.directive('customDropdown', function () {
    return {
        restrict: 'E',

        scope: {
            data: '@',
            function: '&',
            target: '@',
        },

        link: function (scope, element, attrs) {

            function insertList(obj) {
                var model = scope.function()(obj);

                const list = document.createElement('select');

                //here I want to set the ng-model to whatever target passed in
                list.setAttribute('ng-model', scope.target);     

                //model is a local var, I do not know how to make it work for ngOptions
                list.setAttribute('ng-options', "item for item in model")  

                element.append(list);
            }

            element.on('load', insertList(scope.data));
        }

    };
});

基本上,我想使用基于本地创建的列表的ngoptions,我想给列表分配一个作为“target”传入的ngmodel,在这种情况下,它被称为“tobeusedlater”。目的是在使用此自定义指令之后,在某些html代码中使用tobeusedlater。
我尝试了一种更笨拙的方式:

link: function (scope, element, attrs) {

            function insertList(obj) {
                var model = scope.function()(obj);

                const list = document.createElement('select');
                list.setAttribute('ng-model', scope.target);

                //default option
                const option = document.createElement('option');
                option.setAttribute('value', '');
                option.textContent = '--Select--';
                list.append(option);

                for (let i of model) {
                    const option = document.createElement('option');
                    option.setAttribute('value', i);
                    option.textContent = i;
                    list.append(option);
                }

                element.append(list);
            }

            element.on('load', insertList(scope.data));
        }

这会正确呈现列表,但仍然无法将“tobeusedlater”指定为ngmodel。我最好使用ngoptions,因为它很整洁。非常感谢您的帮助,谢谢!

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题