AngularJS 自定义指令中的表单在数据绑定后未更新

Question

这是我的代码：

模板：

<div ng-repeat="framework in frameworks"  id="{{framework.id}}"
     role="tabpanel" class="tab-pane show active"  >
    <div class="progress" >
        <div  ng-click="display_framework_formulaire(framework)"
              class="progress-bar" role="progressbar"
              style="width: {{framework.level}}%"
              aria-valuenow="{{framework.level}}"
              aria-valuemin="0" aria-valuemax="100">
            <div data-toggle="tooltip" data-placement="top"
                 data-title="{{framework.version}}">
            </div>
            {{framework.nom}} 
        </div>
    </div>
</div>

这是我控制器中的功能：

$scope.display_framework_formulaire = function(framework) 
{   
    $scope.frameworkCourant = framework;
    $scope.vueCourante = 'VUE_FORMULAIRE_FRAMEWORK'     
}

这是模板中的指令：

<formulaire-framework ng-show="vueCourante == 'VUE_FORMULAIRE_FRAMEWORK'" 
                      categories="categories" framework="frameworkCourant" >
</formulaire-framework>

和指令：

app.directive("formulaireFramework", function() {
    return {
        restrict: "E",        
        templateUrl: 'formulaireFramework.html',
        scope: {
            framework : '=framework',
            categories : '=categories'
        },
    }
})

所以它在加载主页后工作。但是当我这样做时：

restfulService.getFrameworksByCategorieValue(categorie_value)
.then(function(frameworks){
    $scope.frameworks = [];                 
    angular.forEach(frameworks, function(framework, key) {
        $scope.frameworks.push(framework);
    });
});

更新框架列表，当我点击一个框架时，公式元素的值是最后一个动作的值，而不是当前框架的值。

PS : 我的表格 :

<form name="frameworkForm" id="frameworkForm" method="POST" class="spacer"
      ng-submit="submit()" ng-controller="frameworkFormulaireController" > 
    <div class="input-group"> 
        <select  ng-model="framework.categorie.id">
            <option ng-repeat="categorie in categories"
                    ng-value="categorie.id"
                    ng-selected="categorie.id == framework.categorie.id" >
              {{categorie.label}}
            </option>   
        </select> 
     </div> 
     <div class="input-group" > 
          <input type="text"  class="form-control" ng-value="id"
                 ng-model="framework.id"> 
     </div> 
     <div class="input-group"> 
          <span class="input-group-addon">Nom</span> 
          <input type="text"  class="form-control" ng-value="nom"
                 ng-model="framework.nom"> 
     </div> 
     <div class="input-group"> 
          <span class="input-group-addon">Version</span> 
          <input type="text"  class="form-control" ng-value="version"
                 ng-model="framework.version"> 
     </div>    
     <div class="input-group"> 
          <span class="input-group-addon">Niveau</span> 
          <input type="text"  class="form-control" ng-value="level"
                 ng-model="framework.level"> 
     </div>            
     <input type="submit" class="btn btn-success pull-right" >
</form>

Answer 1

从表单中删除 ng-controller 指令：

<form name="frameworkForm" id="frameworkForm" method="POST" class="spacer"
      ng-submit="submit()" ̶n̶g̶-̶c̶o̶n̶t̶r̶o̶l̶l̶e̶r̶=̶"̶f̶r̶a̶m̶e̶w̶o̶r̶k̶F̶o̶r̶m̶u̶l̶a̶i̶r̶e̶C̶o̶n̶t̶r̶o̶l̶l̶e̶r̶"̶ >

   <!-- input controls -->
   <!-- input controls -->
   <!-- input controls -->
   <!-- input controls -->

</form>

将控制器添加到指令中：

app.directive("formulaireFramework", function() {
    return {
        restrict: "E",        
        templateUrl: 'formulaireFramework.html',
        controller: 'frameworkFormulaireController',
        scope: {
            framework : '=framework',
            categories : '=categories'
        },
    }
})

ng-controller 指令添加了一个新的子作用域，这是不必要的并且可能存在原型继承变量隐藏问题。

有关详细信息，请参阅 What are the nuances of scope prototypal / prototypical inheritance in AngularJS?。

AngularJS 自定义指令中的表单在数据绑定后未更新

AngularJS form in custom directive not updating after data binding

angularjs

angularjs-directive