How to call a javascript function from ng-if outside of controller scope-AngularJS

Question

I have a plain javascript function display(str) which I want to call inside ng-if. This function is outside the scope of controller

HTML

<body ng-app="myApp">
   <div id="mycntrl" ng-controller="mainController">
      <select id="selectid1" name="selectid1" ng-model="angularselect">
        <option ng-value=""></option>
        <option ng-value="val1">Value 1</option>
        <option ng-value="val2">Value 2</option>
      </select> Value : {{angularselect}}
   <div ng-if="display(angularselect) === true">
    <p>
       Returned true
    </p>
   </div>
  </div>
</body>

JS

var myApp = angular.module('myApp',[]);

myApp.controller('mainController',function($scope){

});

function display(str)
{
    console.log('Javascript function called with argument '+str);
    return true;
}

FIDDLE

Ameer Hamza · Accepted Answer · 2016-08-11 06:14:04Z

1

You can make global function in your app.run module like this.

    myApp.run(function($rootScope){
       $rootScope.display = function(str) {
          console.log('Javascript function called with argument '+str);
          return true;
        }
    })

and use it in html code like this:

<div ng-if="$root.display(angularselect) === true">

here is the fiddle JsFiddle

answered Aug 11, 2016 at 6:14

Ameer Hamza

6064 silver badges16 bronze badges

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

Comments

Gopinath Shiva · Accepted Answer · 2016-08-11 06:44:21Z

You can make use of $window object to access global variable in angular application.

Reference: https://docs.angularjs.org/api/ng/service/$window

Fiddle: https://jsfiddle.net/7kLr89cc/4/

var myApp = angular.module('myApp',[]);

myApp.controller('mainController',function($scope,$window){
    $scope.displayHere = function(str){
      return $window.display(str);
    };
});

function display(str)
{
    console.log('Javascript function called with argument '+str);
    return str;
}

Vaibhav Shah · Accepted Answer · 2016-08-11 06:58:11Z

0

You can assign display method using scope if they both are in same file.

Example -

myApp.controller('mainController',function($scope){
$scope.display = display;
});

answered Aug 11, 2016 at 6:58

Vaibhav Shah

5283 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to call a javascript function from ng-if outside of controller scope-AngularJS

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related