admin管理员组文章数量:1287584
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 = "";
}]);
})();
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 = "";
}]);
})();
- 3 The whole point of controllerAs syntax is to not use $scope. You have to bind the variables to "this" in your controller. – cuttlas Commented Mar 31, 2015 at 14:23
- 1 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 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 Commented Mar 31, 2015 at 14:26
- 1 Dang it, I totally overlooked using the variable self as $scope, I should have been using this! Thank you! – Ohjay44 Commented Mar 31, 2015 at 14:28
- 1 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 Commented Mar 31, 2015 at 14:29
1 Answer
Reset to default 14You 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;'
本文标签： javascriptAngular JS quotController asquot syntax not workingStack Overflow
版权声明：本文标题：javascript - Angular JS "Controller as" syntax not working - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741232217a2362316.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论