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

Question

我希望达到以下结果:

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

然后，呈现一个包含所有用户列表的选择元素。这就是我到目前为止所做的:

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

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

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

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

编辑:好的，现在我有了一个服务，但仍然不知道如何使用作用域进行连接。

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?
                       });
        }
    };
});

Answer 1

我明白了。

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;
                   });
        }
    };
}]);

你可以这样使用它:

<users get-all></users>