从自定义指令

时间:2016-10-20 08:12:49

标签: javascript jquery angularjs typescript angularjs-directive

我已经构建了一个自定义指令,用于生成和填充JSON数据的下拉列表。

但是我想用功能对下拉选择作出反应。因此,我想使用ngChange(和ngModel)。 所以我尝试从指令更新ng-model开始。 指令中的链接功能应该给我我需要的一切。 但是第四个参数是未定义的,因此我不能使用它甚至编译。

指令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>

0 个答案:

没有答案