Angular+Jade |从控制器到脚本标记的数组

Angular + Jade | Array from controller to script tags

本文关键字：数组 脚本 控制器 Angular+Jade      更新时间：2023-09-26


有没有一种方法可以访问我控制器上的数组，并在我的翡翠模板上的<script>标签中准确地渲染它。

例如：

Controller.js

$scope.myArray = ["item1","item2"];

在我的index.jade:

script.
    var clientArray = {{myArray}}

到目前为止，我还没有成功，所以我想知道Jade+Angular是否有这种可能性。

如有任何帮助，我们将不胜感激。

更新-使用上述配置时返回错误

SyntaxError: Unexpected token {
at eval (native)

您不能直接访问脚本中的作用域对象。范围在该实体（controller、directives等）的角度渲染期间被分配给元素。您需要通过对元素调用.scope()来获取包含作用域的元素，并从作用域中获取项，并且只有在元素准备好时才能执行此操作。

示例：-

假设您的控制器是：-

app.controller('MainCtrl', function($scope) {
  $scope.myArray = ["item1","item2"];
});

并且您的标记中有这个控制器。

 <div class="ctrl" ng-controller="MainCtrl">
  <!-- ....some content -->
  </div>

然后你可以通过以下操作访问：-

 <script>
   angular.element(document).ready(function() { //Or get an instance of $timeout from the injector
     var clientArray = angular.element('.ctrl').scope().myArray;
     console.log(clientArray);
   });
  //Or run it via the timeout which is pushed into the async queue and is run after angular has manipulated the DOM again it is relative.

 var timeout= angular.injector(['ng']).get('$timeout');
 timeout(function(){
    var clientArray = angular.element('.ctrl').scope().myArray;
    console.log(clientArray);
 });
 </script>

演示

这里有很多注意事项：-

1） 您需要确保在运行脚本时，angular必须已经为元素分配了范围。（基本上angular已经完成了DOM渲染）

2） 您需要选择附加了作用域的特定元素。

在前面的例子中，选择器工作是因为我在angular之前加载了jquery。否则，您将不得不使用本机DOM方法访问元素，例如

 angular.element(document.querySelector('.ctrl')).scope().myArray

但不管怎样，您应该尽量不要进入访问angular之外的scope对象的位置如果你指出你的具体问题是什么，可能有更好的方法来处理它。

相关文章：