AngularJS form in custom directive not updating after data binding

Question

This is my code :

Template :

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

This is the function in my controller :

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

This is the directive in template:

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

And the directive :

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

So it's working after loading homepage. But when i do :

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

Which update the list of frameworks, when i click on a framework, the value of element of formulare is this of last action and not the value of the framework current.

PS : my form :

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

Are you saying that after the frameworks are reloaded and you click a new framework, your `formulaire-framework` directive doesn't show the new `frameworkCourant`? — Frank Modica, Aug 09 '18 at 20:36
Sorry, the working is : I have a btn who add a new framework. And i have event of a liste of framework who display a form with the value of framework — ArthurArmand, Aug 09 '18 at 20:37

score 1 · Accepted Answer · answered Aug 10 '18 at 04:02

Remove the ng-controller directive from the form:

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

Add the controller to the directive:

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

The ng-controller directive adds a new child scope which is unneccessary and can have prototypal inheritance variable hiding problems.

For more information, see What are the nuances of scope prototypal / prototypical inheritance in AngularJS?.

AngularJS form in custom directive not updating after data binding

1 Answers1