Angular-將值從指令傳遞給全局范圍變量

Question

我的應用程序有兩個字段：“客戶”和“服務（參與度）”。 我為客戶端添加了自動完成功能（使用此解決方案https://stackoverflow.com/a/19547431/223934 ）。 我想進一步：如果選擇一個客戶端，它將發送對該客戶端可用服務（參與）的請求，並作為選項顯示在視圖中。

CSM.controller('myController', ['$scope', '$http', function ($scope, $http) {
    $scope.availableEngagements = '';
....

和指令

CSM.directive("autocomplete", ["AutoCompleteService", function (AutoCompleteService) {
return {
    restrict: "A",
    scope: {
        action: '@',
        availableEngagements: "="
    },
    link: function (scope, elem, iAttrs, ctrl, http) {
        iAttrs.$observe('action', function (actionValue) {
            elem.autocomplete({
                source: function (searchTerm, response, scope) {
                    AutoCompleteService.search(searchTerm.term, actionValue).then(function (autocompleteResults) {
                        response($.map(autocompleteResults, function (autocompleteResult) {
                            return {
                                label: autocompleteResult.name,
                                value: autocompleteResult.id,
                                desc: autocompleteResult.name
                            };
                        }));
                    });
                },
                minLength: 1,
                select: function (event, selectedItem) {
                    // Do something with the selected item, e.g.
                    scope.selectedValue = selectedItem.item.value;

                    scope.$apply();
                    if (actionValue === "client") {
                        scope.availableEngagements = AutoCompleteService.engagementSearch(selectedItem.item.value);
                        //scope.$apply();
                    }

                    event.preventDefault();
                }
            });
        });
    }
};
}]);

CSM.factory("AutoCompleteService", ['$http', function ($http) {
    return {
        search: function (term, action) {
            return $http.post("autocomplete/" + action + "/", {term: term}).then(function (response) {
                return response.data;
            });
        },
        engagementSearch: function (client) {
            //Tai sao POST ko duoc ma GET lai duoc?
            $http.get("autocomplete/engagement/?term=" + client).success(function (data) {
                return data;
            });
        }
    };
}]);

我已嘗試按照本指南中的方法應用綁定方法“ =”。 自動完成工作正常，應用成功發送了請求，並接收了服務（參與度）的結果。 它只是不會傳遞到全局范圍以在視圖中顯示。

請幫助我指出我的代碼有什么問題。 非常感謝你。

Answer 1

首先要注意的是，您的指令創建了一個隔離范圍，該隔離范圍是其父范圍的子范圍（不是原型繼承的）。 因此，在指令中使用$parent來更新控制器上定義的作用域對象：

scope.$parent.availableEngagements = AutoCompleteService.engagementSearch(selectedItem.item.value);