Javascript 使用；“控制器作为某物”；在AngularJS_Javascript_Angularjs_Angular Ui Bootstrap

Javascript 使用；“控制器作为某物”；在AngularJS

javascript angularjs

Javascript 使用；“控制器作为某物”；在AngularJS,javascript,angularjs,angular-ui-bootstrap,Javascript,Angularjs,Angular Ui Bootstrap,我对AngularJS控制器“as”语法有问题。我正在尝试使用引导nanomodals并将其连接到$scope 现在，我为我的模态创建角度分量。我也用html创建对话框我的html代码： <body ng-app="application"> <div ng-controller="accountController as $acc" class="controller-account"> <script type="text/ng-tem

我对AngularJS控制器“as”语法有问题。我正在尝试使用引导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: {

        }
    });
};
}]);

var angularApp=angular.module（'application'，['ngAnimate'，'ngSanitize'，'ngCookies'，'ui.bootstrap']）；
angularApp.component（'loginModalComponent'{
templateUrl:'loginModal.html'，
绑定：{
解析：“您声明了一个组件，但我在html代码中看不到它
因此，首先需要获取模态的html并将其放入文件“loginModal.html”中，然后从中删除“ng controller”指令。因此，该文件中的代码应如下所示：
    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 
    });

似乎您需要替换此：
<div ng-controller="accountController as $acc" class="controller-account">

添加Controllera并替换此组件后，仍然无法工作。我不明白，为什么我要用登录模式组件替换ng控制器？@JerzyGawor，使用当前代码示例很难理解您当前的问题。原因还可能是您使用了两次“$acc”：在组件中声明的控制器中和在中声明的控制器中“accountController”已连接到angularApp。顺便检查一下你的linkedIn配置文件。也许我不知道如何使用角度组件，但我的代码示例在单击s按钮后显示对话框，因此组件看起来工作正常。问题在于“确定”按钮，它使用$acc方法无法工作。可能最好删除$acc和在这里开始使用$scope。@JerzyGawor，尝试在html和控制器代码中用“$ctrl”替换“$acc”，但同时删除您之前根据我的第一个示例添加的“controllerAs”行。检查您的skype，我有心情帮助您。@JerzyGawor，如果将“$acc”更改为“$scope”有帮助，则意味着同时使用“$acc”时出现了问题在同一组件中的几个控制器中。默认情况下，任何组件都使用$ctrl，因此您也可以尝试使用它，就像我在前面的评论中所写的那样。祝您好运。HTML代码应该是组件本身的代码，还是您正试图在那里使用该组件？我想做与[链接]中相同的事情但是我错过了一些东西。这个html是我的主视图。在脚本标记中的ng控制器中，我得到了组件使用的模式模板。单击某些按钮后会出现对话框，但我无法调用任何$acc函数。这并不能真正回答我的任何问题，但基本上，不要将controllerAs与组件混合使用。coComponent已经指定了它的控制器。您需要将模板拆分为它自己的html页面，然后只需将控制器包含在页面中您想要的位置。组件基本上是简化的指令。
    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 
    });