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

我正在阅读角度文档：

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

它有一点说：

不要使用控制器：

操纵DOM——控制器应该只包含业务逻辑。将任何表示逻辑放入控制器会显著影响其可测试性。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)">
...