angularjs 呈现我不想呈现的代码

Question

我有一个页面：

<html>
  <head>
    <script type="text/javascript" src="angular.min.js"></script>
  </head>

  <body>
    {{hello}}
    <script type="text/javascript">

      var siteApp = angular.module('siteApp',[])
      angular.bootstrap(document.body, ['siteApp'])
    </script>
  </body>
</html>

当我运行页面时，我什么也看不到，因为 angular 渲染了 {{hello}}，但我只想看到 {{hello}} 我怎么能实现这一点？而且我不能使用 <html ng-app="siteApp">，因为我使用 turbolinks

Answer 1

像这样使用bootstrap，

angular.element(document).ready(function() {
    angular.bootstrap(document, ['siteApp']);
});

或

angular.element(document.body).ready(function() {
    angular.bootstrap(document.body, ['siteApp']);
});

这是一个DEMO

并注意您尝试插入 {{ hello }} 这将在范围内搜索 hello 变量，因为没有名为 hello 的范围变量，它将不打印任何内容，以检查angular 设置是否正确使用 {{ "hello" }} 这将打印 hello，因为我们正在尝试打印字符串而不是变量值。

更新

您可以更改插值定界符来执行此操作

EX:

var siteApp = angular.module('siteApp', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
});

DEMO

一处使用

有一个名为 ng-non-bindable

的 angular 内置指令

此指令将为您完成此操作:)

<pre ng-non-bindable>{{hello}}</pre>

这是一个DEMO

angularjs 呈现我不想呈现的代码

angularjs render the code what I didn't want to

ruby-on-rails

angularjs

turbolinks