Question

我正在尝试创建一个指令，该指令使用带有输入字段的模板，当输入字段失去焦点时，该指令会对父控制器进行回调，以便我可以更新父模型中的其他值。该指令正在实现jQuery自动完成。我已尝试直接调用父回调函数以及调用本地作用域上的函数，然后调用回调函数。

这是指令代码和指令应用的元素。我错过了什么？

HTML：

<div iptm-ext-lookup extension="button.destination" siteid="vm.buttonInfo.primaryExtSiteID" buttonid="button.identifier" extensionselected="vm.extensionSelected" numberlostfocus="vm.numberLostFocus(buttonid)"></div>

JS：

angular.module("iptmApp").directive("iptmExtLookup", function () {

    function Controller($scope, $element, $attrs, extensionMgmtService) {
        $scope.getData = function (extension, siteid) {
            return extensionMgmtService.getExtensionInfo(extension, siteid);
        }
    }

    // I bind the $scope to the DOM behaviors.
    function link(scope, element, attributes, controllers) {

        // Setup jquery UI
        element.autocomplete({
            minLength: 3,
            source: [],
            select: function (event, ui) {
                scope.extensionselected(scope.buttonid, ui.item.value, ui.item.extId, ui.item.extLabel);
            }
        });

        //Watcher to update autocomplete list when the input data changes
        scope.$watch('extension', function (value) {
            if (value != null && value.length > 2) {
                scope.getData(value, scope.siteid).success(function (data) {
                    element.autocomplete("option", "source", data);
                }).error(function (data, status, headers, config) {
                    alert(status);
                });
             }
        });
    }

    // Return the directive confirugation.
    return ({
        controller: Controller,
        link: link,
        restrict: "EA",
        replace: true,
        template: '<input type="text" ng-model="extension" ng-blur="lostFocusCallback({ buttonid: $scope.buttonid })" style="width:100px; height:14px;">',
        scope: {
            extension: '=',
            buttonid: '=',
            extensionselected: '=',
            lostFocusCallback: '&numberlostfocus',
            siteid: '='
        }
    });
});

Answer 1

仔细阅读documentation ...

通常需要通过表达式将数据从隔离范围传递到父作用域，这可以通过将局部变量名称和值的映射传递到表达式包装器fn
来完成。

您需要以下

<div iptm-ext-lookup ... numberlostfocus="vm.numberlostfocus(buttonid)"></div>
<!--                                  note the argument name ^  -->

并在您的指令中

template: '<input ... ng-blur="lostFocusCallback({ buttonid: buttonid })" ...'

您不需要$scope.buttonid作为

模板已绑定到指令的范围和
模板中没有定义$scope变量

指令模板中的ng-blur不会在父控制器函数上回调

1 个答案: