Pass a variable from controller to html in angularjs

Question

index.html

<div class="center" ng-controller="DescriptionController">
<p>{{perigrafi}}</p></div>

app.js

 app.controller('DescriptionController', function($scope, dataPassingService) {

    $scope.description = dataPassingService.get();
    var perigrafi = $scope.description.Description_en;
    var onoma = $scope.description.Name_en;
    alert("the description is " + perigrafi);
});

The datapassing service is function that passing data between controllers.The alert work perfect but when I try to show the perigrafi in html file is not work any suggestions? Thanks in advance.

rkalita · Accepted Answer · 2016-02-06 08:29:09Z

2

perigrafi must be in $scope in your case like $scope.perigrafi

app.controller('DescriptionController', function($scope, dataPassingService){
    $scope.description = dataPassingService.get();
    $scope.perigrafi = $scope.description.Description_en;
    var onoma = $scope.description.Name_en;
    alert("the description is " + perigrafi);
});

answered Feb 6, 2016 at 8:29

rkalita

5754 silver badges16 bronze badges

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

1 Comment

rkalita Over a year ago

@AntonisKountouretis glad to help ;)

ashfaq.p · Accepted Answer · 2016-02-06 09:00:29Z

0

Angular.js two way binding for variables work only for those variables which are defined over scope. Since you have defined perigrafi as a local variable, therefore it is not getting binded into html as you are expecting. Put your variable perigrafi on $scope as $scope.perigrafi as suggested by @rkalita.

app.controller('DescriptionController', function($scope, dataPassingService) {
  $scope.description = dataPassingService.get();
  $scope.perigrafi = $scope.description.Description_en;
  var onoma = $scope.description.Name_en;
  alert("the description is " + $scope.perigrafi);
});

edited Feb 6, 2016 at 9:00

answered Feb 6, 2016 at 8:35

ashfaq.p

5,49723 silver badges36 bronze badges

Comments

RIYAJ KHAN · Accepted Answer · 2016-02-06 08:41:42Z

-1

Well you can directly use $scope.description object in your html without creating new unnecessary variable

$scope.description.Description_en // for var perigrafi

$scope.description.Name_en; //  for var onoma

and in HTML you can do like this

<p>{{description.Description_en}}</p>
<p>{{description.Name_en}}</p>

answered Feb 6, 2016 at 8:41

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

1 Comment

ashfaq.p Over a year ago

The question is not about wether he can use it directly or not. Its about why is it not getting binded.

Collectives™ on Stack Overflow

Pass a variable from controller to html in angularjs

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related