Using "Controller as something" in AngularJS

Question

I have a problem with AngularJS Controller "as" syntax. I am trying to use bootstrap nanomodals and attach to them controllers $scope.

For now, I create angular component for my modal. I create my dialog in html too.

My html code:

<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>

My JS script:

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: {

        }
    });
};
}]);

I dont know why, but i cannot use in this example $acc.okButton() function.

I used this and this to resolve this problem, but i cannot do this. Something is bad here, but i dont know what.

Is the HTML code supposed to be the code for the component itself or are you attempting to make use of the component there? — Mike Feltman
– Mike Feltman, Commented Jun 20, 2017 at 20:27
i want to do the same as in the [link]plnkr.co/edit/mKrqmV35ary96rItbw6N?p=preview but i had to miss something. This html is my home view. In the ng-controller in the script tags, i have got my modal template, which is using by component. Dialog appears after click some button, but i cannot call any $acc function. — Jerzy Gawor
– Jerzy Gawor, Commented Jun 20, 2017 at 20:31
That doesn't really answer any of my questions, but basically, don't mix using controllerAs with components. The component already specifies its controller. You need to split the template out into its own html page, then just include your controller in your pages with <login-modal-component></login-modal-component> where you want it. Components are basically simplified directives. — Mike Feltman
– Mike Feltman, Commented Jun 20, 2017 at 20:35

Artem Arkhipov · Accepted Answer · 2017-06-20 20:34:45Z

2

You declared a component, but I can not see it in your html code.

So firstly you need to take the html of the modal and place it to file 'loginModal.html' and remove 'ng-controller' directive from it. So the code in that file should be like this:

Seems that you need to replace this:

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

with this:

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

In such case it will use your controller described in component declaration. But also you will add controllerAs: '$acc' to your component, because by default it uses $ctrl.

So you also need to slightly change code like this:

    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 
    });

edited Jun 20, 2017 at 20:34

answered Jun 20, 2017 at 20:15

Artem Arkhipov

7,5256 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jerzy Gawor Over a year ago

After add controllerAs and replacing this, still not working. I dont understand, why i should replace ng-controller with login-modal-component?

Artem Arkhipov Over a year ago

@JerzyGawor, it is very difficult to understand your current problem using current example of your code. The reason also could be that you are using '$acc' twice: in controller declared in component and in 'accountController' attached to angularApp. Check you linkedIn profile by the way.

Jerzy Gawor Over a year ago

Maybe i dont understand of how to angular components working, but my code example is showing dialog after click s button, so component looks working correctly. Problem is with Ok Button, which is not working using $acc methods. Maybe good point is to remove $acc and start using $scope here.

Artem Arkhipov Over a year ago

@JerzyGawor , try to replace '$acc' with '$ctrl' in your html and controllers code, but also remove 'controllerAs' line which you added before according to my first example. And check your skype, I have mood to help you.

Artem Arkhipov Over a year ago

@JerzyGawor, if changing '$acc' to '$scope' helped it means that problem was in simultaneous using '$acc' in few controllers in same component. By default any component is using $ctrl by default, so you can also try to use it as I wrote in previous comment. Good luck.

Collectives™ on Stack Overflow

Using "Controller as something" in AngularJS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related