AngularJs和Controller别名

时间:2015-09-02 17:34:02

标签: angularjs angularjs-controller angularjs-validation

我试图在视图中为AngularJS控制器设置别名,但由于某些奇怪的原因 - 当我在方法和属性前加上时它似乎没有响应 - 任何想法可能导致它的原因?

这是我的观点(我在Laravel 5.1中使用它):

@extends('admin.template.layout-login')

@section('content')

    <div class="row">

        <div class="large-6 medium-8 columns large-offset-3 medium-offset-2" ng-controller="LoginController as login">

            <form
                name="htmlForm"
                class="panel hide"
                ng-submit="login.submit()"
                ng-class="{ 'show-block' : !login.isRequestCompleted() }"
                novalidate
                >

                <label for="username">
                    Username: *
                    <ng-messages
                            for="htmlForm.username.$error"
                            class="hide"
                            ng-class="{ 'show-inline' : login.isSubmitted() }"
                            >
                        <ng-message
                                when="required"
                                class="warning"
                                >Please provide your email address</ng-message>
                        <ng-message
                                when="email"
                                class="warning"
                                >Invalid email address</ng-message>
                        <ng-message
                                when="unsuccessful"
                                class="warning"
                                >Incorrect login details</ng-message>
                        <ng-message
                                when="suspended"
                                class="warning"
                                >Your account has been suspended</ng-message>
                    </ng-messages>
                </label>

                <input
                    type="email"
                    ng-model="formData.username"
                    name="username"
                    id="username"
                    required
                    >

                <label for="password">
                    Password: *
                    <ng-messages
                            for="htmlForm.password.$error"
                            class="hide"
                            ng-class="{ 'show-inline' : login.isSubmitted() }"
                            >
                        <ng-message
                                when="required"
                                class="warning"
                                >Please provide your password</ng-message>
                        <ng-message
                                when="password"
                                class="warning"
                                >Invalid password</ng-message>
                    </ng-messages>
                </label>

                <input
                    type="password"
                    ng-model="formData.password"
                    name="password"
                    id="password"
                    required
                    password
                    >

                <label for="remember">
                    <input
                        type="checkbox"
                        ng-model="formData.remember"
                        name="remember"
                        id="remember"
                        > Remember Me
                </label>

                <input
                        type="submit"
                        class="small button"
                        value="SEND ENQUIRY"

                        ng-if="!login.isOutForDelivery()"
                        >
                <button
                        type="button"
                        class="small button"
                        disabled
                        ng-if="login.isOutForDelivery()"
                        >
                    PLEASE WAIT <i class="fa fa-spinner fa-spin"></i>
                </button>

            </form>


            <div
                class="hide"
                ng-class="{ 'show-block' : login.isRequestCompleted() }"
                ng-bind-html="login.trustAsHtml(confirmation)"
                ></div>


        </div>

    </div>

@endsection

这是AngularJS控制器模块:

(function(window, angular, app) {

    "use strict";

    app.controller(
        'LoginController',
        [
            '$scope',
            '$controller',
            '$window',
            function(
                $scope,
                $controller,
                $window
            ) {

                angular.extend(this, $controller('FormController', { $scope: $scope }));

                $scope.submit = function() {

                    if ( ! $scope.isValid()) return false;

                    $scope.data = {
                        username : $scope.formData.username,
                        password : $scope.formData.password
                    };

                    $scope.submitRequest(
                            '/admin',
                            $scope.data
                        )
                        .success(function(data, status, headers, config, statusText) {

                            $window.location.href = data.url;

                        })
                        .error(function(data, status, headers, config, statusText) {

                            $scope.validation(data);
                            $scope.endOutForDelivery();
                            return false;

                        });

                };

            }
        ]
    );

})(window, window.angular, window.CmdSystem.App);

加上前一个扩展的FormController

(function(window, angular, app) {

    "use strict";

    app.controller(
        'FormController',
        [
            '$scope',
            'RequestService',
            'ContentService',
            function(
                $scope,
                RequestService,
                ContentService
            ) {

                $scope.outForDelivery = false;
                $scope.requestCompleted = false;

                $scope.submitRequest = function(url, formData) {

                    $scope.outForDelivery = true;

                    return RequestService.post(url, formData);

                };

                $scope.responseReceived = function() {

                    $scope.requestCompleted = true;
                    $scope.outForDelivery = false;

                };

                $scope.isResponseReceived = function() {

                    return $scope.requestCompleted && ! $scope.outForDelivery;

                };

                $scope.endOutForDelivery = function() {

                    $scope.outForDelivery = false;

                };

                $scope.trustAsHtml = ContentService.trustAsHtml;

                $scope.isValid = function() {

                    return $scope.htmlForm.$valid;

                };

                $scope.isSubmitted = function() {

                    return  $scope.htmlForm.$submitted &&
                            ! $scope.isRequestCompleted();

                };

                $scope.isRequestCompleted = function() {

                    return $scope.requestCompleted;

                };

                $scope.isOutForDelivery = function() {

                    return $scope.outForDelivery;

                };

                $scope.validation = function(data) {

                    angular.forEach(data, function(value, key) {

                        this[key].$error[value] = true;

                    }, $scope.htmlForm);

                };

            }
        ]
    );

})(window, window.angular, window.CmdSystem.App);

1 个答案:

答案 0 :(得分:1)

控制器上没有任何方法。它们都是在$ scope上定义的。因此,您无法使用login别名访问它们,这些别名是指控制器,而不是范围。

如果你想打电话

login.foo()
从视图中

,然后必须在控制器上设置方法,而不是在范围上设置:

this.foo = function() { ... };