Angularjs - contrôleur de mon partiel

Voici comment j'ai réussi à faire un formulaire avec des champs récursifs (basé sur cette réponse: https://stackoverflow.com/ A / 15663410/1036025 )

résultat [ Lien d'image ]:

p>

Le contrôleur Voir qui charge la maison.html partielle avec une vue NG: p> xxx pré>

le contrôleur de formulaire fort> qui est à l'intérieur de la maison.html: p> xxx pré>

la vue partielle forte> (Ici, le chemin de modèle de NG-Inclure pourrait être une propriété de vos champs ou que vous pouvez utiliser un boîtier de commutation et afficher le entrée / sélection de votre choix: p> xxx pré>

le modèle champ.html strong> (avoir un modèle par type de champ, ou un modèle principal avec un Etui de commutation sur la propriété Champ.Type) P>

<button ng-click="customevent(field)">{{field.label}}</button>
<ul>
    <li ng-repeat="field in field.Fields" ng-include="'views/field.html'"></li>
</ul>

Voici une plumnk pour vous aider pour ce scénario ...

http://plnkr.co/edit/rvfrmpd4rlam8aefswg7?p=preview < / p>

Ceci est juste une illustration de la manière dont cela peut être atteint. Sans savoir combien de contrôle vous avez sur les données de configuration de formulaire, il n'est pas vraiment possible de fournir une réponse plus complète. Entre si vous voulez savoir, il est préférable d'injecter $ Rootscope partout où vous voulez faire une émission $ ($ émettez-vous dans l'arborescence DOM pendant que $ la diffusion diminue .. Donc, $ Broadcasting à partir de $ Rootscope atteindra toute l'application.) < / p>

laissez-moi savoir si cela vous aide à sortir.

Je pense que la manière angulaire de le faire est d'utiliser des directives. Je ferais quelque chose comme un commutateur NG dans la répétition de votre point de vue principal et que le commutateur NG inclut simplement la directive appropriée ... En supposant une directive "Entrée-Text" une directive "Drop-Dropdown" existent: xxx pré>

i croit em> de cette façon, vous n'aurez pas le même problème que vous rencontrez maintenant. Je n'ai pas vraiment configuré ce que vous essayez de faire, mais je suis à 99% de savoir que vous devriez utiliser des directives! Ils sont idéaux pour le type de chose que vous faites et seront beaucoup plus réutilisables. P>

J'utilise une directive sur http: //angularlist.com Pour gérer les notes, et je peux dire avec confiance qu'ils ne croient pas de fils lorsque j'en ai plus d'un sur la page - cela dit, je ne regarde rien là-bas, répondez simplement aux événements ... En fait, laissez-moi tester quelque chose (tester .........) oui! J'ai ajouté une montre à la valeur du modèle La directive Mes notations est la modification et lorsque vous cliquez sur une note, un seul observateur est tiré - celui du contrôleur en question. Ce n'est pas sur le site en direct, juste mon serveur de dev de devoir ici à la maison, mais voici la directive si cela vous aide: P>

app.directive("angularStars", function() {
  return {
    restrict: 'E',
    scope: {
      model: '=ngModel',
      notifyId: '=notifyId'
    },
    replace: true,
    transclude: true,
    template: '<div><ol class="angular-stars">' + '<li ng-class="{active:model>0,over:over>0}">1</li>' + '<li ng-class="{active:model>1,over:over>1}">2</li>' + '<li ng-class="{active:model>2,over:over>2}">3</li>' + '<li ng-class="{active:model>3,over:over>3}">4</li>' + '<li ng-class="{active:model>4,over:over>4}">5</li>' + '</ol></div>',
    controller: function($scope, $attrs, $http) {
      $scope.over = 0;

      // TEST WATCH
      $scope.$watch('model', function() {
        console.log('modelChange', $scope.model);
      });

      $scope.setRating = function(rating) {
        $scope.model = rating;
        $scope.$apply();
        if ($attrs.notifyUrl !== void 0 && $scope.notifyId) {
          return $http.post($attrs.notifyUrl, {
            id: $scope.notifyId,
            rating: rating
          }).error(function(data) {
            if (typeof data === 'string') {
              alert(data);
            }
            return $scope.model = 0;
          });
        }
      };
      return $scope.setOver = function(n) {
        $scope.over = n;
        return $scope.$apply();
      };
    },
    link: function(scope, iElem, iAttrs) {
      if (iAttrs.notifyUrl !== void 0) {
        return angular.forEach(iElem.children(), function(ol) {
          return angular.forEach(ol.children, function(li) {
            li.addEventListener('mouseover', function() {
              return scope.setOver(parseInt(li.innerHTML));
            });
            li.addEventListener('mouseout', function() {
              return scope.setOver(0);
            });
            return li.addEventListener('click', function() {
              return scope.setRating(parseInt(li.innerHTML));
            });
          });
        });
      }
    }
  };
});