Question

我已经创建了如下的自定义指令，
的 html的：

<input type="text" placeholder="Search" ng-model="selected"  typeahead="Customer.CompanyName for Customer in typeaheadSrc | filter:$viewValue" />

.directive：

module.directive("typeahead", [
           function () {
            return {
                restrict: "E",
                templateUrl: typeahead.html,
                link: function (scope, element, attrs) {
                    scope.typeaheadSrc = scope.$eval(attrs.datasource);
                }
            };
        }
    ]);

上面的代码只是一个自定义指令，我可以在任何地方使用它。它唯一能做的就是将数据源（这里我用它作为attrs.datasource）显示在typeahead中。

以下是我在html中使用它的方式，

<div class="col-md-10">
<typeahead datasource={{GetAllCustomers}}></typeahead>
</div>

它将数据从控制器传递给html，就像这样，

 $scope.GetAllCustomers = [
                {
                    "CompanyName ": "Customer1"
                },
                {
                    "CompanyName ": " Customer2"
                },
                {
                    "CompanyName ": " Customer3"
                },
                {
                    "CompanyName ": " Customer4"
                }
            ];

以上代码可以正常工作，GetAllCustomers作为上面自定义指令 attrs.datasource 字段的数据源传递。
问题是我在GetAllCustomers中使用webapi来获取数据而不是静态数据。我使用工厂和服务来获取如下数据，

module.controller("customerController", [“$scope”, "customerFactory",
function ($scope, customerFactory) {
$scope.GetAllCustomers = customerFactory.GetAllCustomers().then(function (result) {
                    return result;
                },
                   function (error) {
                       console.log("GetAllCustomers failed");
                   });
]);
  module.factory("customerFactory", [
        "customerService",
        "$q",
        function (customerService, $q) {
            var customerObj = {};
            var deferred = $q.defer();
customerObj.GetAllCustomers = function () {
                return customerService.GetAllCustomers()
                .then(function (response) {
                    deferred.resolve(response.data);
                    return deferred.promise;
                }, function (response) {
                    deferred.reject(response);
                    return deferred.promise;
                });
            };

            return customerObj; 
        }]);

module.service("customerService", [
        "$http",”$scope”
        function ($http,$scope) {
$scope.GetAllCustomers = function () {
                var tempUrl = TEMPLATES_PATH.customer_api;
                var request = {
                    method: GET,
                    url: tempUrl
                };
                return $http(request, { withCredentials: true });
            };
        }
    ]);

在上面的代码中，GetAllCustomers也会从webapi获取值，但问题是只有在执行custom指令后才会加载响应。因此attrs.datasource值将为null 现在的流程是，工厂要求
Typeahead定制指令
工厂回复

自定义指令应在工厂响应后执行，但它将在请求完成后和返回响应之前执行流程应如下所示，
工厂要求
工厂响应
Typeahead自定义指令

请告诉我如何为上述代码执行此操作。我无法为webapi创建小提琴。请告诉我怎么做。我尝试过使用诺言，但它不适合我。如果需要，我想知道在哪里写诺言。

Answer 1

像这样改变，我认为它会起作用

首先在指令

<typeahead datasource={{GetAllCustomersValue}} ng-if="GetAllCustomersValue"></typeahead>

在工厂第二部分

 $scope.GetAllCustomers = customerFactory.GetAllCustomers().then(function (result) {
                         $scope.GetAllCustomersValue=result;
                         return $scope.GetAllCustomersValue;
                        },
                           function (error) {
                               console.log("GetAllCustomers failed");
                           });
        ]);

自定义指令链接在response.data获取其数据之前执行

1 个答案: