CODEWITHSUNDEEP
javascriptangularjs
zuvladimir
zuvladimir

Reputation: 115

I need to show some text in DIV tag with Angular

Could you help me, i have not knowledge of Angular. I need to show some text in DIV tag. Visibility condition is returning from JS function: isShowing. Text contains HTML tags and is returning from JS function: agreementMessage.

<div ng-controller="formController" class="container" id="container">
    <div class="agreement-signed-message" ng-if="isShowing()">{{showAgreementMessage()}}</div>
</div>


function showAgreementMessage() {
    return "message";
}

function isShowing() {
    return true;
}

This is demo functions.

Upvotes: 1

Views: 4885

Answers (2)

zb22
zb22

Reputation: 3231

You need to use $scope to invoke the function from your HTML (View) to your controller by binding: 

function DemoCtrl($scope) {
   $scope.showAgreementMessage = function() {
      return "message";
  }

  $scope.isShowing = function() {
      return true;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="DemoCtrl" ng-app> 
  <div class="agreement-signed-message" ng-if="isShowing()">{{showAgreementMessage()}}</div>
</div>

Upvotes: 1

Jimenemex
Jimenemex

Reputation: 3166

I actually don't see a problem with the code you are using if you move both the functions to the formController.

Forgetting to add them to $scope will cause your formController to not be able see them.

var app = angular.module("Test", []);

var formController = function($scope) {

  $scope.showAgreementMessage = function() {
    return "messagesdf";
  }

  $scope.isShowing = function() {
    return true;
  }
}

app.controller(formController, ["$scope", "formController"]);

// Don't do this. Add them to formController
// function showAgreementMessage() { ... }
// function isShowing() { ... }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="Test">
  <div ng-controller="formController" class="container" id="container">
    <div class="agreement-signed-message" ng-if="isShowing()">
      {{ showAgreementMessage() }}
    </div>
  </div>
</div>

Upvotes: 2

Related Questions