如何创建一个发出ajax请求的angularjs指令？

I would like to achieve the following result:

我想实现以下结果：

<users name="allUsers" get-all></users>

And then, render a select element with a list of all users. This is what I did until now:

然后，使用所有用户列表呈现一个select元素。这就是我到现在所做的：

var app = angular.module("Security", []);

app.directive("users", function() {
    return {
        restrict: 'E'
    };
});

app.directive("getAll", function() {
    return {
        restrict: 'A'
    };
});

After lots of googling, I found nothing related. Probably I am searching for rats instead of dogs...

经过大量的谷歌搜索，我发现没有任何相关。可能我正在寻找老鼠而不是狗...

EDIT: OK, now I have a service, but still don't know how to connect using scope.

编辑：好的，现在我有一个服务，但仍然不知道如何使用范围连接。

app.factory('userService', function ($http) {
    return {
        getAll: function () {
            return $http.get('/users/getAll')
                        .then(function (result) {
                            return result.data;
                            // [{Id: 1, Name: 'John'}, {Id: 2, Name: 'Mark'}]
                        });
        }
    }
});

app.directive("getAll", function() {
    return {
        restrict: 'A',
        require: '^users',
        template: '<option value="{{Id}}">{{Name}}</option>',
        link: function (scope, element, attrs, userCtrl) {
            userService.getAll()
                       .then(function (result) {
                           // What should I do?
                       });
        }
    };
});

1 个解决方案

#1

I got it.

我知道了。

var userModule = angular.module("Users", []);

userModule.factory('userService', ['$http', function ($http) {
    return {
        getAll: function () {
            return $http.get('/security/users/getAll')
                        .then(function (result) {
                            return result;
                        });
        }
    }
}]);

userModule.directive("users", function () {
    return {
        restrict: 'E',
        transclude: true,
        template: '<select><option ng-repeat="item in collection" value="{{item.Id}}">{{item.Name}}</option></select>',
        scope: true
    };
});

userModule.directive("getAll", ['userService', function (service) {
    return {
        restrict: 'A',
        scope: true,
        link: function (scope) {
            service.getAll()
                   .then(function (result) {
                       scope.collection = result.data;
                   });
        }
    };
}]);

And you can use it like this:

你可以像这样使用它：

<users get-all></users>

#1