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> 

従って別のテンプレートを使用してHTMLを更新し、変数のセクションに新たな要素を追加addExercise()方法（指令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-repeatでテンプレートhtmlを追加すると、期待どおりに動作します。私は、ディレクティブによってスコープが失われていると感じますが、正確な理由についてはそれほど確かではありません。誰も私に理由と解決方法を説明することができますか？

ありがとうございました。

Answer 1

お客様の指令でreplace: trueを削除してください。あなたのディレクティブで置き換える=真を削除してみてください

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