javascript - 使用自定义指令时，两种方式绑定(bind)在 AngularJS 中无法立即工作

Question

Plunkr

我有一个简单的自动完成下拉菜单。当我只使用 Controller 时它工作正常。

我想让它可重用，所以我制作了一个具有隔离作用域的自定义指令。

但问题是当我在搜索文本框中输入时，它不会立即调用分配给 ng-change 的 Controller 函数。当我再次开始输入时，它会调用该函数。同样，它采用我之前输入的值而不是当前模型值。

我是自定义指令的新手...我真的不知道如何立即更新模型并从指令范围传递到 Controller 范围。

另一种想法是我无法将函数参数从 html 传递到 Controller 函数。

我想我必须在某处使用 $apply 或 $digest。但是我应该在哪里以及如何使用？

autofillApp.directive('autofillDropdown', function($rootScope) {

    return {

        restrict: 'A',
        templateUrl: "dropdowntemplate.html",
        replace: true,
        scope: {
            'items': '=autofillItems',
            'selected': '=autofillSelected',
            'change': '&autofillChange',
            'focused': '=autofillFocus',
            'onSelect': '&autofillOnselect'
        },
        link: function(scope, element, attr) {
            //console.log(scope.$$watchers);
            //console.log(element);
            //console.log(attr);
            return
        },
        compile: function(element, attributes) {

            var linkFunction = function($scope, element, attributes) {
                $scope.$apply();
            }
            return linkFunction;
        }

    };
})

这是我的 Plunkr: Plunkr

Answer 1

嘿，我检查了你的方法并解决了你的问题。

您的“更改”功能将通过输入字段的“ng-change”调用。没关系吧。但是 ng-model 目前没有更新。因此，只需提供一个带有输入值的参数。

ng-change="change({searchText:selected})"

您需要提供一个具有正确属性名称的 JSON 对象。在这种情况下，我们路由到隔离范围之外，因此我们需要以这种方式调用它(使用相同的属性名称“searchText”):

change="SearchCurrencyOnSearchTextChange(searchText)"

所以最终的“改变”函数应该是这样的:

$scope.SearchCurrencyOnSearchTextChange = function (searchText) {
    if (searchText === null || searchText === '' ||searchText ===undefined) {
        $scope.IsFocused = false;
    }
    else {
        $scope.IsFocused = true;
        $scope.searchCurrencies = $scope.GetFilteredData(searchText);
    }
};

我还删除了您的一些 css 隐藏和显示方法。如果你使用 ng-show 和 jquery 来显示/隐藏东西，它很快就会让你大吃一惊。尝试坚持使用一个。

另外，我将您的指令从“属性”指令更改为“元素”指令；D

https://plnkr.co/edit/8sNVFLGOfEcjeLw58Wb6?p=preview