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

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()增加了一个新元素添加到可变部，因此，更新与另一模板的HTML的方法（通过指令new-exercise表示）。

即

$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> 

我期待templa te exercise-form.html将输入内的值更新为hello，但范围为空。

但是，如果我删除该指令并添加ng下的模板html重复它按我的预期工作。我觉得由于指令导致范围丢失，但不确切的原因。任何人都可以解释我的理由和如何解决？

谢谢。

Answer 1

删除指令中的replace: true。下面

修正指令给出：

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