I have a variable I'm setting in my view with ng-init which I am then trying to access in my controller. When I try to access it however, I'm getting an undefined.
Relevant pieces of code:
My view:
<div ng-controller="MyCtrl">
<div ng-init="pageTitle = 'kittens'">
</div>
</div>
My controller:
var MyCtrl;
MyCtrl = function($scope) {
return console.log($scope.pageTitle);
};
What am I missing here?
Wait until the variable is init.
$scope.$watch('pageTitle', function () {
console.log($scope.pageTitle);
});
$timeout(function () { /* ... */ });You can also take advantage of how JavaScript defines functions and use a function for ng-init instead of $watch (jsfiddle).
<div ng-app>
<div ng-controller="MyCtrl" ng-init="pageTitleEquals('kittens')">
Page title is {{ pageTitle }}
</div>
</div>
Controller:
var MyCtrl = function($scope) {
$scope.pageTitleEquals = function(title) {
$scope.pageTitle = title;
}
};
This question is similar: How to set scope property with ng-init?
the controller is being created before the pageTitle variable is added to the $scope object.
Since you are doing a "single time init", like a constructor I recommend you to unbind the watch after using the variable:
var pageTitleWatch = $scope.$watch('pageTitle', function () {
console.log($scope.pageTitle);
// Now just unbind it after doing your logic
pageTitleWatch();
});
