javascript - AngularJS をリファクタリングして controllerAs を使用し、必要な入力が空でない場合は CSS を適用します

Question

AngularJS 1.5.6 を使用して有効になったら、必要な入力の背景色を条件付きで変更する最も効率的な方法は何でしょうか? 私の理解とオンラインで読んだことによると、 $scope の使用を避け、代わりに controllerAs を使用する必要があります。controllerAs を使用するには、次の AngularJS コードにどのようにリファクタリングしますか?

CSSとHTMLのみ

HTML

<input id='textfield' placeholder='Search'  required>

CSS

#textfield:valid {
    background-color: green;
    color: white;
}

$スコープの使用

HTML

<div ng-app="myApp" ng-controller="testController">
    <input type="text" ng-class="cssClass" ng-change="changeCssInput()" ng-model="text"/>
</div>

CSS

.input-green {
    background-color: green;
    color: white;
}

.input-red {
    border: 3px solid red;
}

AngularJS

angular.module('myApp', []).
controller('testController', function ($scope)
{
    $scope.text = '';
    $scope.cssClass = 'input-red';    
    $scope.changeCssInput = function () {
        $scope.cssClass = $scope.text.length <= 0 ? 'input-red' : 'input-green';  
    }
});