Блог

Я создал пользовательскую директиву для генерации и заполнения выпадающего списка из данных JSON.

Однако я хочу отреагировать на выпадающий список с помощью функции. Поэтому я хочу использовать ngChange (и ngModel). Итак, я пытаюсь начать с обновления ng-model из директивы. Функция link в директиве должна предоставить мне все, что мне нужно. НО четвертый параметр не определен, поэтому я не могу его использовать или даже скомпилировать.

Директива TS:

 module lsw{

lswApp.lswAppModule.directive("guiDropdown",
    () => ({
        restrict: "E",
        require: "ngModel",
        scope: {
            data: "=",
            ctrl: "="
        },
        link(scope, element, attrs, ctrls) {

            element.bind("change", () => {

            });

        },
        templateUrl: "../../App_Scripts/Directives/guiDropdown.html"
    }));}
  

«ctrls:{}»

Моя идея состояла в том, чтобы использовать ctrls.$setViewValue для обновления ngModel

Директивный HTML

 <div class="elements">
<select name="{{data.name}}" class="dropdown-box">
    <option ng-repeat="option in ctrl" ng-value="option">{{option}}</option>
</select>
  

Основной просмотр HTML

                     <div ng-repeat="element in HomeController.wrapper" ng-if="HomeController.trigger">
                    <div ng-switch="element.type">

                        <div ng-switch-when="dropdown">
                            <gui-dropdown data="element" ctrl="HomeController.content" ng-model="element" ng-change="HomeController.test()"></gui-dropdown>
                        </div>

                        <div ng-switch-when="textfield">
                            <gui-textfield data="element"></gui-textfield>
                        </div>

                        <div ng-switch-when="checkbox">
                            <gui-checkbox data="element"></gui-checkbox>
                        </div>

                    </div>
                </div>