在 AngularJS 中使用“控制器作为东西”答案

【问题标题】：Using "Controller as something" in AngularJS在 AngularJS 中使用“控制器作为东西”
【发布时间】：2017-06-20 19:59:31
【问题描述】：

我对 AngularJS 控制器的“as”语法有疑问。我正在尝试使用 bootstrap nanomodals 并将控制器 $scope 附加到它们。

现在，我为我的模态创建了角度组件。我也在 html 中创建我的对话框。

我的html代码：

<body ng-app="application">
    <div ng-controller="accountController as $acc" class="controller-account">
        <script type="text/ng-template" id="loginModal.html">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Nowe konto</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="userNameInput">Nazwa użytkownika:</label>
                        <input type="text" class="form-control" id="userNameInput" placeholder="Wprowadź nazwę użytkownika">
                    </div>
                    <div class="form-group">
                        <label for="userPasswordInput">Hasło:</label>
                        <input type="password" class="form-control" id="userPasswordInput" placeholder="Password">
                    </div>
                    <div class="form-group">
                        <label for="userEmailInput">E-Mail:</label>
                        <input type="email" class="form-control" id="userEmailInput" placeholder="Wprowadź E-mail">
                    </div>
                    <button ng-click="$acc.okButton()" class="btn btn-primary">Załóż konto</button>
                </form>
            </div>
        </script>

我的 JS 脚本：

var angularApp = angular.module('application', ['ngAnimate', 'ngSanitize', 'ngCookies', 'ui.bootstrap']);
angularApp.component('loginModalComponent', {
templateUrl: 'loginModal.html',
bindings: {
    resolve: '<',
    close: '&',
    dismiss: '&'
},
controller: () => {
    var $acc = this;

    $acc.$onInit = () => {

    };

    $acc.okButton = () => {
        console.log('Liiiii');
        //HTTP request about login
    };

    $acc.closeButton = () => {
        $acc.close();
    }
}


});

angularApp.controller('accountController', ['$scope', '$http', '$cookies', '$uibModal',
function($scope, $http, $cookies, $uibModal){
var $acc = this;

$acc.isUserSignIn = false;

$acc.loginModalOpen = () => {
    var modalInstance = $uibModal.open({
        animation: true,
        component: 'loginModalComponent',
        resolve: {

        }
    });
};
}]);

我不知道为什么，但我不能在这个例子中使用 $acc.okButton() 函数。

我使用this 和this 解决了这个问题，但我做不到。这里有些不好，但我不知道是什么。

【问题讨论】：

HTML 代码是否应该是组件本身的代码，还是您正在尝试使用那里的组件？
我想在 [link]plnkr.co/edit/mKrqmV35ary96rItbw6N?p=preview 中做同样的事情，但我不得不错过一些东西。这个 html 是我的主页视图。在脚本标签中的 ng-controller 中，我得到了由组件使用的模态模板。单击某个按钮后出现对话框，但我无法调用任何 $acc 函数。
这并不能真正回答我的任何问题，但基本上，不要将控制器与组件混合使用。该组件已经指定了它的控制器。您需要将模板拆分为自己的 html 页面，然后只需将控制器包含在您想要的页面中。组件基本上是简化的指令。

标签： javascript angularjs angular-ui-bootstrap

【解决方案1】：

您声明了一个组件，但我在您的 html 代码中看不到它。

因此，首先您需要获取模态的 html 并将其放入文件 'loginModal.html' 并从中删除 'ng-controller' 指令。所以该文件中的代码应该是这样的：

看来你需要替换这个：

<div ng-controller="accountController as $acc" class="controller-account">

用这个：

<login-modal-component class="controller-account" />

在这种情况下，它将使用组件声明中描述的控制器。但是你也会将 controllerAs: '$acc' 添加到你的组件中，因为默认情况下它使用 $ctrl。

所以你还需要像这样稍微修改一下代码：

    angularApp.component('loginModalComponent', {
        templateUrl: 'loginModal.html',
        bindings: {
            resolve: '<',
            close: '&',
            dismiss: '&'
        },
        controller: () => {
            var $acc = this;

            $acc.$onInit = () => {

            };

            $acc.okButton = () => {
                console.log('Liiiii');
            };

            $acc.closeButton = () => {
                $acc.close();
            }
        },
        controllerAs: '$acc'   // ADD THIS LINE 
    });

【讨论】：

添加 controllerAs 并替换它后，仍然无法正常工作。我不明白，为什么我应该用 login-modal-component 替换 ng-controller？
@JerzyGawor，使用当前代码示例很难理解您当前的问题。原因也可能是您使用了两次“$acc”：在组件中声明的控制器和附加到 angularApp 的“accountController”中。顺便检查一下你的linkedIn个人资料。
也许我不明白角度组件如何工作，但我的代码示例在单击 s 按钮后显示对话框，因此组件看起来工作正常。问题出在 Ok Button 上，它不能使用 $acc 方法工作。也许好的一点是删除 $acc 并在此处开始使用 $scope。
@JerzyGawor ，尝试在您的 html 和控制器代码中将 '$acc' 替换为 '$ctrl'，但还要根据我的第一个示例删除您之前添加的 'controllerAs' 行。并检查您的Skype，我有心情帮助您。
@JerzyGawor，如果将 '$acc' 更改为 '$scope' 有帮助，则意味着问题是在同一组件中的几个控制器中同时使用 '$acc'。默认情况下，任何组件都默认使用 $ctrl，因此您也可以尝试使用它，就像我在之前的评论中所写的那样。祝你好运。