AngularJS - How to get angular object from 'this'

Question

I'm new to Angular and maybe I'm missing some of the concept. My idea was to separate Angular Controllers logic from the UI logic, meaning that the controllers could be easily reusable withouth knowing what the UI would do with tha data it processed. In this caso, I would like to, for example, clear the form and inputs errors outside the controller.

Imagien I have a controller functiuon like this:

    $scope.createCategory = function () {
    $scope.Loading = true;
    $scope.clearServerError();
    $scope.categoryForm.$setPristine();
    angular.forEach($scope.categoryForm, function (input) {
        if (input && input.hasOwnProperty('$viewValue')) {
            input.$setPristine();
            input.$setUntouched();
        }
    });

    $("#categoryForm :input").prop("disabled", true);

        var response = $http({
            url: "/api/categories",
            method: "POST",
            headers: authHeaders,
            data: JSON.stringify($scope.NewCategory),
        }).then(function mySuccess(response) {
            $scope.Categories.push(response.data);
            $scope.resetNewCategory();
            $('#category-add-modal').modal('hide');
        }, function myError(response) {
            var message = response.data.error_description;

            $scope.Server.error = true;
            $scope.Server.message = message;
        }).finally(function end() {
            $scope.Loading = false;
            $("#categoryForm :input").prop("disabled", false);
        });
};

As you can see, the controller nows some aspects of the UI, like the form is named "categoryForm" and there's a modal called "#category-add-modal". I wanted to separete this logic, passing 4 functions callbacks: initCallback, successCallback, failureCallback and finallyCallback. Only these three functions would know what elements the UI has. In this case, and for example, the initCallback should reset category form and all inputs to Pristine and untouched. How is that achievable?

Typically, the $http part would live in a service, and be injected into the controller — user184994
– user184994, Commented Oct 28, 2017 at 11:33
I see. I will surely follow your rule. So that means I will have a new controller for every UI? — Ricardo Alves
– Ricardo Alves, Commented Oct 28, 2017 at 11:47

Martin Staufcik · Accepted Answer · 2017-10-28 12:00:05Z

0

You usually do not need to use JQuery inside your angular controller. For example

$("#categoryForm :input").prop("disabled", true);

could be rewritten using ng-disabled attribute which would be the clean way to do it.

answered Oct 28, 2017 at 12:00

Martin Staufcik

9,6728 gold badges57 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ricardo Alves Over a year ago

I'm new and you are write. I could use that with the Loading variable on my scope.

Martin Staufcik Over a year ago

That could work. For the modal dialog, calling jquery is ok, there is also an option to use angular directives for bootstrap (more here).

Ricardo Alves Over a year ago

Yes, I did what you propose and solved part of the problem. Still can't separate the modal logic and set pristine and untouched. Do you have any sugestions?

Martin Staufcik Over a year ago

Both setPristine and setUntouched work with the form name, for example $scope.formName.$setUntouched(). It seems there might be no need to iterate through input controls if used this way.

Collectives™ on Stack Overflow

AngularJS - How to get angular object from 'this'

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related