Binding a global object to a controller in Angular

Question

Binding a global object to a controller in Angular

This is my markup

    <div id="username" ng-controller="quickUserAdd">
    <h1>User</h1>
    <input placeholder="your full name" ng-model="fullname">
    <div ng-show="fullname">
        <div>
            <span class="big">Username</span>
            <span class="small">{{username()}}</span>
        </div>
        <div class="password-{{passwordStatus()}}">
            <input type="password" ng-model="password" placeholder="Password"/>
            <span class="small">{{passwordStatus()}}</span>
        </div>
    </div>
</div>

And my controller:

    var passwordStrengths = ["weak", "medium", "ok", "great"];
    function quickUserAdd($scope)
    {
        $scope.password = "";
        $scope.fullname = "";
                   ....
    }

How do I bind $scope.fullname, $scope.username and $scope.password to installation.user[0] (where installation is a global object), so that on any change of fullname, username or password, they're updated in installation.user[0] (also an object)?

javascript
angularjs

Answer 1

I'm sure that you are well aware of problems with global variables so I assume here that you don't have other choice and in your use-case you need to access a globally defined JavaScript object.

Probably the easiest way forward in your case is to expose the installation.user[0] on a scope in your controller like so:

function quickUserAdd($scope) {
   $scope.user = installation.user[0];
   ....
}

and then bind to properties of the user object like this:

<input placeholder="your full name" ng-model="user.fullname">
<input type="password" ng-model="user.password" placeholder="Password">

This way any changes in an input box should be imediatelly propagated to the global variable.

Please note that if you would like to change the global variable outside of the AngularJS world and have the UI still updated you will have to wrap this change into the Scope.$apply() method.

If I could suggest one more thing: usually people tend to name AngularJS controllers starting with an uppercase and add the Ctrl suffix so your controller could be named like QuickUserAddCtrl;

Answer 2

What I really needed was shared services.

That allows me to share a structure of data between controllers, in this case, share users between QuickUserAdd (quickly add one user) and UsersEditor (modify the whole list of users. in a different page of the app).

Furthermore, I can use pkozlowski.opensource's solution (referencing an outside object upon init) to attach all my services to an object in "installation". And Scope.$apply() would never be needed since the installation object is required only to be able to read all the data collected from the UI at one time.