Question

我有一个成功运行的AngularJS应用程序，我将其构建为独立的“CreateUser”小部件。我正在创建第二个小部件“ViewUsers”，它将是当前用户的表格（最终目标是将它们绑定在一起或根据用户所在的页面保持独立）。

无论如何，我的第一个应用程序运行正常，但是当我放置第二个应用程序时，第二个应用程序将无法运行。即使是简单的<input ng-model="test" />{{test}}也行不通。

**编辑：似乎调用$scope.loadUsers();导致错误。在这种情况下，如何调用加载函数在构造函数中运行？

这是一个小提琴和我的代码：http://jsfiddle.net/YYcna/

HTML（减去html / head）

<body ng-app>
    <fieldset>
        <legend>Create new user</legend>
        <form ng-submit="createNewUser()" ng-controller="CreateUsers" enc-type="multipart/form-data" method="POST" action="">
            <select ng-model="selectedType" ng-options="type as type for type in types" name="type"></select>
            <input style="display:block;" ng-repeat="field in fields[selectedType]" type="text" name="{{field.value}}" ng-model="formData[field.value]" placeholder="{{field.name}}" />
            <input type="submit" value="Create" />
        </form>
    </fieldset>

    <fieldset>
        <legend>All users</legend>
        <div ng-controller="ViewUsers">
            <input type="text" ng-model="test" />{{test}}
        </div>
    </fieldset>
</body>

JAVASCRIPT

/**
 * User creation controller. 
 * 
 * @param {type} $scope
 * @param {type} $http
 * @returns {undefined}
 */
function CreateUsers($scope, $http, $rootScope){
    $scope.selectedType = '';
    $scope.formData = {};
    $scope.method = 'POST';
    $scope.url = '/users/createUser';
    $scope.types = [
        'Student',
        'Parent',
        'Teacher',
        'Staff'
    ];

    $scope.fields = {
        User:[
            {name: 'First Name', value: 'first_name'},
            {name: 'Last Name', value: 'last_name'},
            {name: 'Email', value: 'email'},
            {name: 'Phone', value: 'phone'}
        ],
        Employee:[
            {name: 'Start Date', value:'start_date'},
            {name: 'Branch', value:'branch'}
        ]
    };
    $scope.fields.Student = $scope.fields.User;
    $scope.fields.Parent = $scope.fields.User;
    $scope.fields.Employee = $scope.fields.User.concat($scope.fields.Employee);
    $scope.fields.Teacher = $scope.fields.Employee;
    $scope.fields.Staff = $scope.fields.Employee;


    $scope.createNewUser = function(){
        this.formData.type = this.selectedType;
        console.log($scope);
        console.log($scope.formData);

        $http({
            method: $scope.method,
            url:    $scope.url,
            data:   $scope.formData
        }).success(function(data,status){
            $scope.status = status;
            $scope.data = data; 
            console.log($scope);
        }).error(function(data,status){
            $scope.data = data || 'Request failed';
            $scope.status = status;
            console.log($scope);
        });
    }
}
 /**
 * View users controller
 *
 * @param {type} $scope
 * @returns {undefined} 
 */
function ViewUsers($scope, $http){
    $scope.users = [];
    $scope.url = '/users/getUsers'
    $scope.test = 'checken';

    $scope.loadUsers();
    console.log('loaded view users');
    $scope.loadUsers = function(){
        $http({
            method: 'GET',
            url: $scope.url
        }).success(function(data, status){
            $scope.status = status;
            $scope.data = data;
            console.log($scope.data);
        }).error(function(data, status){
            $scope.data = data || 'Request failed';
            $scope.status = status;
            console.log($scope.data);
        });
        console.log('attempted to get users');
    }
}

Answer 1

您尝试在定义之前调用该函数。使用这种类型的函数赋值语法是不可能的。

请改为尝试：

 /**
 * View users controller
 *
 * @param {type} $scope
 * @returns {undefined} 
 */
function ViewUsers($scope, $http){
    $scope.users = [];
    $scope.url = '/users/getUsers'
    $scope.test = 'checken';

    $scope.loadUsers = function(){
        $http({
            method: 'GET',
            url: $scope.url
        }).success(function(data, status){
            $scope.status = status;
            $scope.data = data;
            console.log($scope.data);
        }).error(function(data, status){
            $scope.data = data || 'Request failed';
            $scope.status = status;
            console.log($scope.data);
        });
        console.log('attempted to get users');
    };
    $scope.loadUsers();
    console.log('loaded view users');
}

为什么这些AngularJS应用程序不会一起运行？

1 个答案: