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, Oct 28 '17 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, Oct 28 '17 at 11:47

score 0 · Answer 1 · answered Oct 28 '17 at 12:00

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 '17 at 12:00

Martin Staufcik

8,295
4
44
63

I'm new and you are write. I could use that with the Loading variable on my scope. – Ricardo Alves Oct 28 '17 at 12:02
That could work. For the modal dialog, calling jquery is ok, there is also an option to use angular directives for bootstrap (more [here](https://stackoverflow.com/questions/16265844/invoking-modal-window-in-angularjs-bootstrap-ui-using-javascript)). – Martin Staufcik Oct 28 '17 at 12:15
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? – Ricardo Alves Oct 28 '17 at 12:55
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. – Martin Staufcik Oct 28 '17 at 15:29

AngularJS - How to get angular object from 'this'

1 Answers1