AngularJs 和控制器别名

Question

我试图在视图中为 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);

Answer 1

None 个方法在控制器上。它们都在 $scope 中定义。所以你不能使用 login 别名访问它们，它指的是控制器，而不是范围。

如果您希望能够调用

login.foo()

从视图来看，方法必须设置在控制器上，而不是作用域上：

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

AngularJs 和控制器别名

AngularJs and Controller alias

angularjs

angularjs-controller

angularjs-validation