脚本内的角度范围

Posted 2023-02-22

【中文标题】脚本内的角度范围

【英文标题】：Angular Scope inside script

【发布时间】：2012-11-29 23:31:49

【问题描述】：

我们可以像下面这样在脚本标签内使用作用域中定义的角度变量吗？

html 代码：

<div ng-controller="AngularCtrl">
 <script>
  alert($scope.user_name);
 </script>
</div>

JS代码：

function AngularCtrl($scope)
 $scope.user_name = 'John';

我只是得到'$scope 未定义'。有人可以帮我解决我在这里做错的事情吗？

【参考方案1】：

不，你不能。 $scope 仅在 inside Angular 中定义，即在您的 AngularCtrl-function 中。有一些方法可以从外部访问角度范围，但这通常是不好的做法，并且表明您没有正确使用 Angular。

做你正在尝试的事情的一个更加有角度的方法是让警报成为控制器逻辑的一部分：

function AngularCtrl($scope) 

    $scope.user_name = 'John';

    $scope.sayHi = function()
        alert('Hi ' + $scope.user_name);
    

然后，您可以使用各种角度技术 (Demo Here) 来调用该 sayHi() 函数。一些例子：

响应点击

<div ng-click="sayHi()">Demo clickable - Please click me</div>

在创建/初始化给定元素时自动一次

<div ng-init="sayHi()">Demo ng-init</div>

初始化时直接从控制器中

function AngularCtrl($scope) 

    $scope.user_name = 'John';

    $scope.sayHi = function()
        alert('Hi ' + $scope.user_name);
    

    // Call it
    $scope.sayHi();

希望这些例子能鼓舞人心，但你真正应该做什么取决于你真正想要完成的事情。

【讨论】：

非常感谢 Supr！我的问题是我有一个加载页面时不存在的 DOM。 DOM 仅在单击特定操作时加载。但问题是 DOM 内部的角度代码没有被编译。那么有没有办法在加载 DOM 时执行 $compile(jQuery("#DOM_ID")) ？再次感谢！

是的，尽管您可能应该为它创建一个指令。请参阅documentation 和this example。请注意，范围应用于编译的返回值，实际上是var compiled=$compile(element.contents()); compiled($scope);。

请注意，Angular 中已经有 a built-in include directive 可以满足您的需求。那里的示例响应下拉列表中的更改，尽管您可以轻松调整它以响应点击事件。

如何访问在初始化时调用该函数的元素？有this吗？

@Andy，我不知道，从技术上讲，您不应该这样做。控制器不应该处理 DOM/元素。如果您需要与元素交互，那么这表明您实际上需要制定合适的指令。这也将使其更易于重复使用。