Angular JS "Controller as" syntax not working

Question

I have built an AngularJS project before and am familiar with the syntax. This time around my ng-controller="UniversalCtrl as universal" is not working and I have tried everything. If I take universal.showHeader == true and change it to showHeader == true it works, but I need it to be the variable of universal. Like I said I have other projects following this same structure and they work fine.

Here is my HTML code:

<!DOCTYPE html>
<html>
    <head lang="en">
       <meta http-equiv="cache-control" content="no-store" />
       <meta http-equiv="expires" content="0" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
       <meta http-equiv="pragma" content="no-store" />
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

       <link href="styles/MarkStrap.css" rel="stylesheet" />
       <link href="styles/Site.css" rel="stylesheet" />

        <script type="text/javascript" src="js/Angular/angular.min.js"></script>
        <script type="text/javascript" src="js/Angular/angular-route.min.js"></script>
        <script type="text/javascript" src="js/Universal/Universal.js"></script>
        <script type="text/javascript" src="js/Universal/Filters.js"></script>
        <script type="text/javascript" src="js/Universal/Directives.js"></script>

        <title>WIN</title>
        <link rel="shortcut icon" href="winIcon.ico">
    </head>
    <body ng-app="winApp" ng-controller="UniversalCtrl as universal">

       <index-header ng-show="universal.showHeader == true"></index-header>
       <ng-view></ng-view>

       <script type="text/javascript" src="js/Applications/Applications.js"></script>
    </body>
</html>

Here is my Universal.js setup:

(function () {
    var winSystem = angular.module('winApp', ['ngRoute']);

    winSystem.config(function ($sceProvider, $routeProvider) {
        $routeProvider
                .when('/Applications', {
                    templateUrl: "view-app.html",
                    controller: "AppController"
                })
                .otherwise({
                    templateUrl: "404.html"
                })
    });

    winSystem.service("sharedData", function () {
        var reloadData = false;
        var beginAppLoad = false;
        var reloadNotes = false;

        self.httpGet = function (http, url, callback) {
            http.get(baseUrl + url, {
                headers: { "Session-Id": localStorage.ogSessionId }
            }).success(function (data) {
                callback(data);
            }).error(function (data, status, headers, config) {
                if (status == "401") {
                    localStorage.removeItem("ogSessionId");
                    localStorage.removeItem("ogUserId");
                    window.location.href = loginUrl;
                }
            });
        };

        self.httpPost = function (http, url, content, callback) {
            http.post(baseUrl + url, {
                Content: JSON.stringify(content)
            }, {
                headers: {
                    "Session-Id": localStorage.ogSessionId
                }
            })
                .success(function (data) {
                    callback(data);
                })
                .error(function (data, status, headers, config) {
                    if (status == "401") {
                        localStorage.removeItem("ogSessionId");
                        localStorage.removeItem("ogUserId");
                        window.location.href = loginUrl;
                    }
                });
        };


    });

    winSystem.controller("UniversalCtrl", ['$scope', '$http', 'sharedData', function ($scope, $http, sharedData) {
        var self = $scope;

        self.sharedDataSvc = sharedData;
        self.isLocal = false;

        if (location.href.indexOf("localhost") > -1) {
            self.isLocal = true;
        } else self.isLocal = false;

        self.account = {};
        self.actions = [];
        self.notifications = [];

        self.alertCount = 0;
        self.showAlert = false;
        self.showHeader = true;
        self.alertMessage = "";

    }]);
})();

The whole point of controllerAs syntax is to not use $scope. You have to bind the variables to "this" in your controller. — cuttlas
– cuttlas, Commented Mar 31, 2015 at 14:23
Are you sure that the Angular library you are importing is 1.2 or above (when Controller As syntax was introduced)? — David says Reinstate Monica
– David says Reinstate Monica, Commented Mar 31, 2015 at 14:24
Hi David, I am using 1.3.15 which says the latest and most stable. It is also the same script that I use in other projects. — Ohjay44
– Ohjay44, Commented Mar 31, 2015 at 14:26
Dang it, I totally overlooked using the variable self as $scope, I should have been using this! Thank you! — Ohjay44
– Ohjay44, Commented Mar 31, 2015 at 14:28
You're binding self to $scope. So obviously when you use the variable showHeader (which means $scope), it'll understand that is a $scope variable. You should've assigned variable self = this, not $scope, then you are good to go. — Kelwen Souza
– Kelwen Souza, Commented Mar 31, 2015 at 14:29

Raulucco · Accepted Answer · 2015-03-31 14:24:25Z

14

You are binding the models to the scope object instead of the controller instance. Try:

winSystem.controller("UniversalCtrl", ['$http', 'sharedData', function ($http, sharedData) {
    var self = this;

    self.sharedDataSvc = sharedData;
    self.isLocal = false;

    if (location.href.indexOf("localhost") > -1) {
        self.isLocal = true;
    } else self.isLocal = false;

    self.account = {};
    self.actions = [];
    self.notifications = [];

    self.alertCount = 0;
    self.showAlert = false;
    self.showHeader = true;
    self.alertMessage = "";

}]);

And i noticed that you are using self variable on the service sharedData but you haven't initialized it. Just the same 'var self = this;'

answered Mar 31, 2015 at 14:24

Raulucco

3,4261 gold badge23 silver badges27 bronze badges

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

1 Comment

Ohjay44 Over a year ago

Thank you, I overlooked these two things and now when I compare them to the other projects I have that is exactly what I was missing.

Collectives™ on Stack Overflow

Angular JS "Controller as" syntax not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related