Question

作为AngularJs的初学者，我正在研究创建单个页面应用程序，并且我无法将一些早期代码转换为更专业的代码。在进行此转换时，我将所有“页面”html移动到他们自己的.html文件中。我正在使用ng-view然后在我的ng-view div标签内显示正确的html页面。虽然在移动所有代码之后，调用我的方法现在出了问题。具体来说，我认为我的错误在app.config中用于路由或在我的.html文件内容中用于调用此信息。如果我从.html中删除ng-controller div，我如何仍然使用app.config中的默认控制器设置？

这是我的app.route设置：

app.config(['$routeProvider',
function config($routeProvider) {

    $routeProvider

        // route for the home page
        .when('/', {
            templateUrl: 'pages/home.html',
            controller: 'mainController'
        })

        // route for the about page
        .when('/about', {
            templateUrl: 'pages/about.html',
            controller: 'aboutController'
        })

        // route for the contact page
        .when('/contact', {
            templateUrl: 'pages/contact.html',
            controller: 'contactController'
        });

}]);

然后这是我的mainController设置：

app.controller('mainController', ['$scope', 'LoginService', function ($scope, LoginService) {
        //Controller logic goes here 



        this.isValid = function (username, password) {

            var EmailRegex = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
            var PasswordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;

            var EmailReg = new RegExp(EmailRegex);
            var PasswordReg = new RegExp(PasswordRegex);

            var em = EmailReg.test(username);
            var pas = PasswordReg.test(password);

            //alert("Hello dude! Email:" + em + " Password:" + pas + "\n" + username + " " + password );

            if (em && pas) {
                return false;
            }
            else {
                return true;
            }
        };

        this.user =
            {
                Message: 'Sign in',
                ButtonMessage: 'Sign in Bailey',
                TempUser: '',
                TempPassword: '',
                FirstName: '',
                LastName: '',
                Role: '',
                AuthHash: null,
                FinalUser: $scope.Username, 
                FinalPassword: $scope.Password,
            };

        $scope.user = this.user;


        this.Authenicate = function (Username, Password) {
            LoginService.Login(Username, Password).then(function (ResponseData)
            {

                var readAbleObject = angular.fromJson(angular.fromJson(ResponseData));
                $scope.user.FirstName = readAbleObject.FirstName;
                $scope.user.LastName = readAbleObject.LastName;
                $scope.user.Role = readAbleObject.Role;
                $scope.user.AuthHash = readAbleObject.AuthHash;
                $scope.user.Username = readAbleObject.Username;
                $scope.user.Password = readAbleObject.Password;
                $scope.user.Message = "Welcome " + $scope.user.FirstName;
                $scope.user.ButtonMessage = "Sign " + $scope.user.FirstName + " " + $scope.user.LastName + " out";

                $scope.clearInput();

            });
        };

        $scope.clearInput = function () {
            this.user.TempUser = null;
            this.user.TempPassword = null;
        };


    }]);

我的html正在等待加载到其中的视图：

<div id="MainDiv" data-ng-app="GApp">
    <div id="LoginDiv" class="wrap" data-ng-view="">

    </div>
</div>

我的.html文件内容：

<div data-ng-controller="mainController as ctrl">
<div id="HomeHtml">
    <link href="Content/Markup/Styles.css" rel="stylesheet" />
    <p class="form-title">{{user.Message}}</p>
    <form name="login" class="login" novalidate>
        <input type="email" placeholder="Susquehanna Software Email" data-ng-model="user.TempUser" />
        <input type="password" placeholder="Password" data-ng-model="user.TempPassword" />
        <input type="submit" value="{{user.ButtonMessage}}" class="btn btn-lg btn-warning" data-ng-disabled="isValid(user.TempUser, user.TempPassword)" data-ng-click="Authenicate(user.TempUser, user.TempPassword)" />
    </form>
</div>

Answer 1

要使控件看到他们需要分配给$scope对象的控制器的视图，例如$scope.Authenticate = this.Authenticate

Answer 2

由于您使用控制器作为语法，如果您编写ctrl.user.TempPassword或通常在用户之前附加ctrl，那么它应该可以工作。

你走在正确的轨道上，你不需要写$ scope.user = this.user。将控制器用作语法的好习惯。

.when('/', {
        templateUrl: 'pages/home.html',
        controller: 'mainController',
        controllerAs: 'ctrl'
})

在html中使用路由配置的范围

2 个答案: