javascript - 为什么 AngularJS 表达式在 HTML 模板中只被替换一次？

Question

我是 angularjs 新手，正在尝试遵循 html 模板。但 AngularJS 只用值替换文本区域中的第一个 {{fragment.id}} 表达式。所有其他 {{fragment.id}} 表达式在生成的 html 代码中保持不变。

<div class="input-box" ng-repeat="fragment in project.fragments">
     <textarea id="code-{{ fragment.id }}" class="code-input" ng-model="content">{{ fragment.content }}</textarea>
     <button class="btn btn-xs btn-primary" style="margin-top:5px;" ng-click="execute({{ fragment.id }})"><i class="glyphicon glyphicon-play"></i> Run</button>
     <script type="text/javascript">
          applyCodeMirror({{ fragment.id }});
     </script>
     <div id="result-{{ fragment.id }}" ng-model="result"></div>
</div>

我还有另一个问题，是否可以像我上面所做的那样使用 angularjs 表达式生成 JavaScript 代码。

Answer 1

一些事情(上面的代码涉及)

1. 使用ng-model绑定(bind)$scope输入变量 - 您的文本区域变为: <textarea id="code-{{ fragment.id }}" class="code-input" ng-model="fragment.content"></textarea>

2. {{}}用于输出 Angular $scope View 变量 - 您不会使用 {{}}在 JavaScript 代码中获取 Angular 变量，因此 <script>{{fragment.id}}</script>是无效的。如果你想使用 Angular $scope Angular 之外的变量(不推荐，但我们都有自己的理由)- 使用 angular.element(elem).scope()获取 scope 的实例(其中 elem 是 ng-controller 声明中的元素)

3. Angular 指令(例如 ng-click )不需要 {{}}获取$scope变量 - 您的ng-click变为:ng-click="execute(fragment.id)"