AngularJS-单独的控制器和DOM操作

我正在阅读角度文档：

https://docs.angularjs.org/guide/controller

它有点说：

请勿使用控制器执行以下操作：

操作DOM-控制器应仅包含业务逻辑。将任何表示逻辑放入Controller中都会极大地影响其可测试性。Angular在大多数情况下都有数据绑定，并且有指令来封装手动DOM操作。

所以我有下面的代码很好用。

$scope.processForm = function() {
    // Get and reset the captcha, then check it was valid.
    response = grecaptcha.getResponse();
    $scope.recaptchaValid = false;
    grecaptcha.reset();

    if (response.length == 0) {
        alert("Not sure how you got here, but you shouldn't have. Go away!");
        return;
    }

    // Update the user we are attempting to send the message.
    $(".contact-message").text("Sending message...").removeClass("hidden alert-danger").addClass("alert-success");
    $(".contact-container").addClass("hidden");

    // Add the recaptcha data to the form so we can send it to the server easier
    $scope.formData.captcha = response;

    $http({
        method : 'POST',
        url : '/api/sendEmail.php',
        data : $.param($scope.formData), // pass in data as strings
        headers : {
            // set the headers so angular passing info as form data (not request payload)
            'Content-Type' : 'application/x-www-form-urlencoded'
        }
    }).success(function(data) {
        if (!data.success) {
            // If the server said there was an error, re-enable the form and display the error
            console.error(data);
            $(".contact-container").removeClass("hidden");
            $(".contact-message").text(data.message).removeClass("hidden alert-success").addClass("alert-danger");
        } else {
            // If the server said all was good, display the message from the server
            $(".contact-message").text(data.message).removeClass("hidden alert-danger").addClass("alert-success");
        }
    });
};

从纯粹主义者之类的解释性禅宗中，我看到应该在某个地方的服务中关闭进行后端API调用的处理（尽管不确定如何执行此操作），但是我不确定如何与$ scope中的数据“正确”，并且在那里可以进行DOM操作？我减少了大部分操作来管理类的DOM操作，但是发送设置更新，我认为应该是一个div，它本身是由某些范围数据驱动的并且使用ng-hide来驱动的。我认为如果您选择语言，这可能真的很有用，但是在维护时会使HTML页面很大且很麻烦。

任何帮助表示赞赏。

编辑

根据我要去的地方和@ C14L的注释，我将Angular代码的代码更新为：

$scope.processForm = function() {
    // Get and reset the captcha, then check it was valid.
    response = grecaptcha.getResponse();
    $scope.recaptchaValid = false;
    grecaptcha.reset();

    if (response.length == 0) {
        alert("Not sure how you got here, but you shouldn't have. Go away!");
        return;
    }

    // Update the user we are attempting to send the message.
    $scope.sendingMessage = true;

    // Add the recaptcha data to the form so we can send it to the server easier
    $scope.formData.captcha = response;

    $http({
        method : 'POST',
        url : '/api/sendEmail.php',
        data : $.param($scope.formData), // pass in data as strings
        headers : {
            // set the headers so angular passing info as form data (not request payload)
            'Content-Type' : 'application/x-www-form-urlencoded'
        }
    }).success(function(data) {
        $scope.serverMessage = data.message;
        $scope.sendingStatus = data.success;
        $scope.sendingMessage = false; // no longer sending
    });
};

我必须承认这样做确实可以更好地负载。HTML有点儿麻烦：

    <div class='sending-indicator alert alert-info' data-ng-hide="!sendingMessage">
        <p>Sending message...</p>
    </div>
    <div class="alert contact-message" 
            data-ng-class="sendingStatus?'alert-success':'alert-danger'" 
            data-ng-hide="serverMessage.length == 0">{{serverMessage}}</div>
    <div  class="contact-container" 
            data-ng-hide="sendingMessage || (sendingStatus && serverMessage.length > 0)">

...