在从 HTML 代码调用的 JavaScript 函数中使用 $scope 变量 - AngularJS答案

【问题标题】：Use $scope variable in a JavaScript function called from the HTML code - AngularJS在从 HTML 代码调用的 JavaScript 函数中使用 $scope 变量 - AngularJS
【发布时间】：2013-01-09 14:34:25
【问题描述】：

我正在使用 Angular，我试图让 $scope 在 JavaScript 函数中使用它。这是一个例子：

我有一个类似这样的 html 标签：

<a id="doSomething" onclick="javascript: doSomething(this);">Do Something</a>
<div ng-show="flag">Click!</div>

还有一个类似这样的 JavaScript 函数：

function doSomething(obj) {
    //$scope.flag = true;
    return true;
}

我想要的是在这个函数中使用 $scope。我还没有找到注入它的方法。问题是我必须使用这种方式来调用函数。你有什么解决办法吗？我会很感激的！

谢谢！

【问题讨论】：

标签： javascript html function scope angularjs

【解决方案1】：

如果你真的需要.. 方法如下：

HTML：

<a onclick="doThing(this);">Do it!</a>

JS：

function doThing(el) {
  var $scope = angular.element(el).scope();
  $scope.thing = newVal;
  $scope.$apply(); //tell angular to check dirty bindings again
}

请务必阅读 angular.element 的文档：http://docs.angularjs.org/api/angular.element 对于 scope.$apply：http://docs.angularjs.org/api/ng.$rootScope.Scope#$apply

但是，您的用例是什么？可能有更好的方法。

【讨论】：

这不起作用：“Uncaught ReferenceError: doThing is not defined”

【解决方案2】：

你也可以内联：

JS：

$scope.doThis = function(str){
     alert(str);
     $scope.$apply();
}

HTML：

<button onclick="angular.element(this).scope().doThis('TEST');"></button>

警告 - 范围嵌套可能会影响结果，但如果角度代码在父级控制中，则可以正常工作

【讨论】：

【解决方案3】：

这与@Andy 的答案相同，但我提到它以防人们想了解如何从事件中获取 $scope 而不是this：

HTML：

<a onclick="doThing(event);">Do it!</a>

JS：

function doThing(ev) {
  var $scope = angular.element(ev.srcElement).scope();          
  $scope.flag = true;
  $scope.$apply(); //tell angular to check dirty bindings again
}

【讨论】：

ev.srcElement = undefined

【解决方案4】：

您应该为此调用 angular ng-click，然后从那里传递范围。

这是我为您创建的示例。 http://plnkr.co/edit/UDLJYuZhR4yfiocSPjKJ

如果它解决了您的问题，请将其标记为答案。

【讨论】：