javascript - Angular js 模型值变化没有反射(reflect)在 ui 中

Question

即使在 Controller 中执行代码后，UI 中的值也不会改变。它显示初始值没有问题。我试过在每个函数(提交和传输)的末尾调用 $scope.$apply() 但它不起作用(它只给 $http.post() 一个错误)。我在这里缺少什么？

app.controller('RegisterController', ['$scope','$http', function($scope,$http) {  
    $scope.user = {
        email: 'admin@blah.com',
        password1: '1qaz2wsx',
        password2:'1qaz2wsx',
        password:'1qaz2wsx',
        username:'Admin',
        profile_picture:'',
        dobDay:'12',
        dobMonth:'12',
        dobYear:'1993',
        date_of_birth:'',
        stateMessage:'',
        messageColor:'white',
    };
    
    var transfer = function(){
        $http.post('http://localhost/cw/index.php/rest/resource/user/action/create',$scope.user).then(function successCallback(response) {
            if(response.data.status!=null){
                if(response.data.status=='success'){
                    $scope.user.stateMessage = 'success';
                    $scope.user.messageColor = "green";
                }
                else if(response.data.status=='failure'){
                    $scope.user.stateMessage = response.data.message;
                    $scope.user.messageColor = "red";
                }
                
            }
        },function errorCallback(response) {
            $scope.user.stateMessage = "Error occured.";
            $scope.user.messageColor = "red";
        });
        
    };
    
    $scope.submit = function(){
        $scope.user.stateMessage="";
        $scope.user.messageColor="white";
        var proceed = true;
        
        if(!validateFields()){
            $scope.user.stateMessage = "All fields must be filled!";
            $scope.user.messageColor = "red";
            proceed = false;
        }
        
        if(validateDate($scope.user.dobDay,$scope.user.dobMonth,$scope.user.dobYear)){
            $scope.user.date_of_birth= $scope.user.dobYear+"-"+$scope.user.dobMonth+"-"+$scope.user.dobDay;
        }else {
            proceed = false;
            $scope.user.stateMessage = "Date is invalid!";
            $scope.user.messageColor = "red";
        }
            
        if($scope.user.password1!=$scope.user.password2){
            proceed = false;
            $scope.user.stateMessage = "Passwords don't match!";
            $scope.user.messageColor = "red";
            
        }else $scope.user.password = $scope.user.password1;
        if(proceed){
            var file = document.getElementById('filePicker').files[0];
            reader = new FileReader();

            reader.onloadend = function(e) {
                $scope.user.profile_picture = JSON.stringify(e.target.result);
                $scope.$apply();
                console.log($scope.user.profile_picture);
                transfer();
            }
            reader.readAsDataURL(file);
        } 
        
        
        function validateFields(){
            /*some form validation*/
            return true;
        }
        
        function validateDate(day,month,year){
          /*some date validation*/
            return true;
        }
       
    }
}]);

HTML代码

 <div ng-controller="RegisterController">
        <span style="background-color:{{user.messageColor}}"><h4>{{user.stateMessage}}</h4></span>
    </div>
<table style="text-align: left" ng-controller="RegisterController">
                            <tr>
                                <td>
                                    Username
                                </td>
                                <td>
                                    <input type="text" ng-bind="user.username" ng-model="user.username">
                                </td>       <td>&nbsp;</td><td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td>
                                    Email
                                </td>
                                <td>
                                    <input type="email" ng-bind="user.email" ng-model="user.email">
                                </td>       <td>&nbsp;</td><td>&nbsp;</td>
                           </tr>
                           <tr>
                                <td>
                                    Password
                                </td>
                                <td>
                                    <input type="password" ng-bind="user.password1" ng-model="user.password1">
                                </td>       <td>&nbsp;</td><td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td>
                                    Retype password
                                </td>
                                <td>
                                    <input type="password" ng-bind="user.password2" ng-model="user.password2">
                                </td>       <td>&nbsp;</td><td>&nbsp;</td>    
                           </tr>
                           <tr>
                                <td>
                                    Date of Birth
                                </td>
                                <td>
                                    <input type="text" ng-bind="user.dobDay" ng-model="user.dobDay" value="DD" size="2" maxlength="2">
                                    <input type="text" ng-bind="user.dobMonth" ng-model="user.dobMonth" value="MM" size="2" maxlength="2">
                                    <input type="text" ng-bind="user.dobYear" ng-model="user.dobYear" value="YYYY" size="4" maxlength="4">
                                </td>    
                           </tr>
                           <tr>
                                <td>
                                    Profile picture
                                </td>
                                <td>
                                    <input id="filePicker" type="file" ng-bind="user.profile_picture" ng-model="user.profile_picture" accept="image/*">
                                    
                                </td>    
                           </tr>
                           <tr>
                               <td></td>
                               <td style="float:left">
                                    <button ng-click="submit()">Submit</button>
                               </td>
                           </tr>
                        </table>

Answer 1

看来我不能在 2 个实例中使用同一个 Controller 。将状态 div 移动到分配给 Controller 的表中对我有用。有一些方法可以通过使用服务在 Controller 之间共享数据，但我不会去那里，因为这只是一个类(class)作业。

AngularJS: share the data of the same controller in two different, not nested parts of the page