Question

我有一个简单的javascript函数display(str)，我想在ng-if内调用它。此功能超出了控制器的范围

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

Answer 1

您可以像这样在app.run模块中创建全局功能。

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

并在html代码中使用它：

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

这是小提琴 JsFiddle

Answer 2

您可以使用$window对象在角度应用程序中访问全局变量。

参考：https://docs.angularjs.org/api/ng/service/$window

小提琴：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;
}

Answer 3

如果两者都在同一个文件中，您可以使用范围分配显示方法。

示例 -

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

如何从ng-if调用控制器范围之外的javascript函数 - AngularJS

3 个答案: