I'd like to init a variable using AngularJS in my template... It seems not working.
Template :
<div class="eventList" ng-controller="EventOfCategoryController">
<input type="hidden" ng-init="categoryId = <%=id%>" />
</div>
Js :
app.controller("EventOfCategoryController", function($scope, $http, $filter) {
console.log($scope.categoryId); //undefined
$http.get('/category/'+$scope.categoryId).success(function(data, status, headers, config) {
// my functions
});
});
You are trying to read the set value before Angular is done assigning.
app.controller("EventOfCategoryController", function($scope, $http, $filter) {
$timeout(function(){
console.log($scope.categoryId);
},1000);
$http.get('/category/'+$scope.categoryId).success(function(data, status, headers, config) {
// my functions
});
});
Ideally you should use $watch as bellow if you need to use ng-init at all:
app.controller("EventOfCategoryController", function($scope, $http, $filter) {
console.log('test');
$scope.$watch("categoryId", function(){
console.log($scope.categoryId);
$http.get('/category/'+$scope.categoryId).success(function(data, status, headers, config) {
// my functions
});
});
});
You can also use a method in you ng-init as follows. This will reduce watch load and increase performance.
app.controller("EventOfCategoryController", function($scope, $http, $filter) {
console.log('test');
$scope.init = function(categoryId){
console.log(categoryId);
$http.get('/category/'+categoryId).success(function(data, status, headers, config) {
// my functions
});
});
});
And ng-int as
<input type="hidden" ng-init="init(<%=id%>)" />
you shoud init the variable in your controller:
app.controller("EventOfCategoryController", function($scope, $http, $filter) {
$scope.categoryId = 7;
console.log($scope.categoryId); //undefined
$http.get('/category/'+$scope.categoryId).success(function(data, status, headers, config) {
// my functions
});
});
And
<input type="hidden" ng-model="categoryId">
id is send from the server :/ See edit in the template..The controller(EventOfCategoryController) is being created before the categoryId variable is added to the $scope object.
$scope.$watch('categoryId', function () {
console.log($scope.categoryId);
});
If you wrap console.log in a setTimeout and utilise a $scope.$apply, categoryId will become available:
setTimeout(function () {
$scope.$apply(function () {
console.log($scope.categoryId); // 7
});
}, 0);
