Question

我的html中有以下代码。

<div id="section">
  <div new-exercise ng-repeat="section in sections track by $index">
  </div>
</div>

<div class="add_exercise add_exercise_btn">
  <a class="add_exercise_link" ng-click="addExercise()">
    <span>+ Add an Exercise</span>
  </a>
</div>

方法addExercise()向变量部分添加一个新元素，因此用另一个模板（由指令new-exercise表示）更新html。

即。

$scope.addExercise = function(){
  $scope.sections.push({
    title: "hello",
    content: "fsa"
  });
}

指令new-exercise：

.directive('newExercise', function () {
  return {
      templateUrl: '/templates/exercise-form.html',
      replace: true,
  }
})

模板exercise-form.html：

<div class="add_exercise" id="add_exercise_form" data-section-id="{{id}}">
<form class="new_section">
    <div class="input-box">
      <input id="title"  type="text" name="title" class="form-control" value="{{section.title}}" ng-model="section.title">
      <label for="title">Exercise Name</label>
      <span class="help-block"></span>
      <span>{{ section.title }}</span>
    </div>
  </form>
</div>

我希望模板exercise-form.html将输入中的值更新为hello，但范围为空。

但是，如果我删除该指令并在ng-repeat下添加模板html，它就像我期望的那样工作。我觉得范围因指令而丢失，但不确定原因。谁能解释一下原因以及如何解决？

感谢。

Answer 1

删除指令中的replace: true。

以下给出的更正指令：

.directive('newExercise', function () {
  return {
      templateUrl: '/templates/exercise-form.html'
  }
})

AngularJS - 在ng-repeat中模板替换的HTML丢失范围

1 个答案: