Angular - 将值从指令传递到全局范围变量答案

【问题标题】：Angular - Pass value from directive to global scope variableAngular - 将值从指令传递到全局范围变量
【发布时间】：2014-10-16 02:18:16
【问题描述】：

我的应用有两个字段：客户和服务（参与度）。我为客户端添加了自动完成功能（使用此解决方案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;
            });
        }
    };
}]);

我已尝试应用绑定方法“=”，如 this guide。自动完成工作正常，应用程序成功发送请求并接收服务（参与）结果。它只是没有传递到全局范围以显示在视图中。

请帮助我指出我的代码有什么问题。非常感谢。

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

首先要注意的是，您的指令创建了一个隔离作用域，该作用域是其父作用域的子作用域（不是原型继承的）。所以在指令中使用$parent 来更新控制器上定义的作用域对象：

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

【讨论】：