Question

我想达到以下结果：

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

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

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>

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

1 个答案: