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' 
    } 
})