Question

有没有办法访问我控制器上的数组，并在我的jade模板上的<script>标签中准确呈现它。

例如：

Controller.js

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

在我的index.jade上：

script.
    var clientArray = {{myArray}}

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

非常感谢任何帮助。

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

SyntaxError: Unexpected token {
at eval (native)

Answer 1

您无法直接访问脚本中的范围对象。在该实体的角度呈现期间，范围被分配给元素（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>

<强> Demo

这里有很多警告： -

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

2）您需要选择附加范围的特定元素。

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

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

但无论如何，你应该尽量不要进入角度以外的范围对象。如果你指出你的具体问题是什么，可以有更好的方法来处理它。< / p>

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

1 个答案: