Question

我有一个javascript库，其中包含许多有用的功能，我可以在我的网站上使用它来执行各种操作。

我知道我无法通过ng-click访问这些功能，因为这些功能超出了范围。

有没有办法访问它们而不必声明只调用库中函数的作用域函数？

Here是一个带示例的jsfiddle。我想知道是否有办法使第二个链接工作。这只是因为我不喜欢定义一个简单地调用另一个函数的函数的想法。 e.g。

HTML：

<div ng-click="doSomething()">Click Me (Working)</div>
<div ng-click="doSomethingElse()">Click Me (Not Working)</div>

Controller JS：

$scope.doSomething = function () {
    doSomethingElse();
};

外部库JS：

function doSomethingElse() {
    alert("SomethingElse");
}

＆LT; ------- ------- UPDATE＆GT;

感谢您的创意回应！ Vinay K的答案是最容易也是最明显的答案，但我决定选择Ron E的答案。原因是我已经拥有一个带有可重用指令集合的全局模块，这将使我在HTML中实现更容易和更清晰。另外，因为我有时会从库中使用多个函数，然后必须在onclick中链接它们：

onlick="func1(); func2(); func3();"

指令只是更清洁，我可以在做其他事情时调用尽可能多的函数。

Answer 1

ng-click表达式（或任何其他角度表达式）将在范围的上下文中进行评估。

由于doSomethingElse未在范围上定义，因此无效。

使用onclick代替ng-click

<div ng-click="doSomething()">Click Me</div>
<div onclick="doSomethingElse()">Click Me </div>

Answer 2

您可以使用指令，这是一个示例：

// in your JS source
angular.directive('something', [function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                alert('yup');
            });
        }
    };
}]);

// in your HTML file
<button type="button" something>Click Me!</button>

这使您可以非常轻松地在整个项目中重用各种代码块/函数。

Answer 3

嗨，如果你已经定义了javascript函数，你可以使用旧的js函数和Angular js一起

示例：

<div ng-click="doSomething()" class="myBtn"=>Click Me (Working)</div>
//JQuery Lib must be included your project
$(document).on('click','.btn',function(){
    eval($(this).attr('ng-click'));
});
function doSomething(){
//Bla Blo Blu Bli
}

感谢阅读

Answer 4

如果您的库全局可用（例如，在窗口对象上），您可以在rootScope中编写一个接受函数名作为参数的方法。保证这不是Angular中最正统的做事方式，但它不需要在所有范围内添加所有这些额外的方法。这是一个粗略的例子：

在你的app.run方法中你可以添加如下内容：

$rootScope.callWindowMethod = function(methodName, parameter) {
  if(typeof window[methodName] !== 'function') {
    console.log('could not find ', methodName, ' function');
    return;
  }
  return window[methodName](parameter);
};

然后在你看来你可以这样做：

<button ng-click="$root.callWindowMethod('alert','Hey there!')">Click Me</button>

你可以变得更加漂亮，并向你的函数传递任意数量的参数，并且函数名称包含嵌套在其他对象中的方法的点，并将它们分开。这至少应该让你开始。

在ng-click上调用范围之外的javascript函数

4 个答案: