从angularjs中的指令调用控制器函数

时间:2015-09-07 06:11:22

标签: jquery angularjs angularjs-directive

我希望在更新记录后从指令调用控制器函数 下面使用的代码

Controller.js

    app.controller('GetAlphabetical', function ($scope, $http) {
     function getCutomers() {

            $scope.loading = true;
            $http.get(ROOT + "Home/GetPesrons").then(function (response) {
                //var _data = angular.fromJson(response);
                $scope.loading = false;
                $scope.Customer = response.data; // please check the request response if list id in data object 
            }, function (error) {
                throw error;
            })
        }

        getCutomers();



app.directive('popOver', function ($compile, $http) {

    var itemsTemplate = "<ul class='unstyled'><input type='text' ng-model='items.ProfaneWord' class='form-control'><button id='popeditSave' class='btn-block btn btn-    danger' ng-click='popeditSave(items.ProfaneWord,items.pID, items.LanguageID)'>Save</button>";
    var getTemplate = function (contentType) {
        var template = '';
        switch (contentType) {
            case 'items':
                template = itemsTemplate;
                break;
        }
        return template;
    }
    return {
        restrict: "A",
        transclude: true,
        template: "<span ng-transclude></span>",
        link: function (scope, element, attrs) {
            var popOverContent;
            if (scope.items) {
                var html = getTemplate("items");
                popOverContent = $compile(html)(scope);
            }
            scope.popeditSave = function (ProfaneWord, pID, LanguageID) {
                var dataToPost = { proPhen: ProfaneWord, ID: pID, LangID: LanguageID };
                $http.post('/Home/UpdateLibrary', dataToPost)
                    .success(function (serverResponse, status, headers, config) {


                        getCutomers();
                    }).error(function (serverResponse, status, headers, config) {
                        $("#succmsg").html("Update failure..").show(500).delay(5000).fadeOut(1000);
                    }
                );
            }




            var options = {
                content: popOverContent,
                placement: "bottom",
                html: true,
                title: scope.title
            };
            $(element).popover(options);
        },
        scope: {
            items: '=',
            title: '@'
        }
    };
});

});

我想在编辑记录后调用getCustomer()函数。

3 个答案:

答案 0 :(得分:0)

更改

function getCutomers() {}

$scope.getCutomers = function(){}

并在指令调用中

scope.getCutomers();

答案 1 :(得分:0)

在指令中添加此内容

scope: {
    items: '=',
    title: '@',
    getCustomer:'&getCustomer',    
}

$scope.getCustomer()(any param from directive); //call function from controller

从你的getCustomer Html中调用它

<pop-over get-Customer="getCutomers">

并将控制器更改为:

app.controller('GetAlphabetical', function ($scope, $http) {
    $scope.getCutomers = function() {
        $scope.loading = true;
        $http.get(ROOT + "Home/GetPesrons").then(function (response) {
            //var _data = angular.fromJson(response);
            $scope.loading = false;
            $scope.Customer = response.data; // please check the request response if list id in data object 
        }, function (error) {
            throw error;
        });
    };

    $scope.getCutomers();
});

答案 2 :(得分:0)

我创建了一个检查用户名是否唯一的指令

app.directive('ngUnique', ['$http', function ($http) {
    return {
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            elem.on('blur', function (evt) {
                scope.$apply(function () {
                    $http({
                        method: 'POST',
                        url: '/User/IsUserExist',
                        data: {
                            username: elem.val(),
                            dbField: attrs.ngUnique
                        }
                    }).success(function (data, status, headers, config) {
                        if (attrs.ngUnique == "username")
                            ctrl.$setValidity('unique', data);
                        else if (attrs.ngUnique == "email")
                            ctrl.$setValidity('uniqueEmail', data);
                        else if (attrs.ngUnique == "oldpassword")
                            ctrl.$setValidity('unique', data);
                        return undefined;
                    });
                });
            });
        }
    }
}]);

请像上面的代码一样创建你的指令

在我的项目中工作正常以检查用户名和电子邮件唯一