AngularJS - accès parent directive sur les propriétés de l'enfant directives

Cela ne devrait pas être trop difficile une chose à faire, mais je ne peux pas comprendre comment le faire au mieux.

J'ai un parent de la directive, comme suit:

directive('editableFieldset', function () {
  return {
    restrict: 'E',
    scope: {
      model: '='
    },
    replace: true,
    transclude: true,

    template: '
      <div class="editable-fieldset" ng-click="edit()">
        <div ng-transclude></div>

        ...

      </div>',

    controller: ['$scope', function ($scope) {
      $scope.edit = ->
        $scope.editing = true

       //...
    ]
  };
});

Et un enfant de la directive:

.directive('editableString', function () {
  return {
    restrict: 'E',
    replace: true,

    template: function (element, attrs) {
      '<div>
        <label>' + attrs.label + '</label>
        <p>{{ model.' + attrs.field + ' }}</p>

        ...
      </div>'
    },
    require: '^editableFieldset'
  };
});

Comment puis-je accéder facilement à la model et editing propriétés de la société mère de la directive de l'enfant de la directive? Dans ma fonction de lien, j'ai accès à la portée parent - dois-je utiliser $watch de regarder ces propriétés?

Mettre ensemble, ce que j'aimerais avoir est la suivante:

<editable-fieldset model="myModel">
  <editable-string label="Some Property" field="property"></editable-string>
  <editable-string label="Some Property" field="property"></editable-string>
</editable-fieldset>

L'idée est d'avoir un ensemble de champs affichés par défaut. Si vous cliquez sur, ils deviennent des entrées et peut être modifié.

Pouvez-vous donner un exemple de ce que le final de balisage va ressembler?
J'ai mis ça dans maintenant

OriginalL'auteur Rahul Sekhar | 2013-11-26

  1. 8

    En s'inspirant de la cette SORTE de post, j'ai une solution de travail ici, dans cette plunker.

    J'ai dû changer un peu. J'ai opté pour un isolé portée sur la editableString ainsi parce qu'il était plus facile de se lier dans les valeurs correctes pour le modèle. Sinon, vous allez avoir à utiliser compile ou d'une autre méthode (comme $transclude service).

    Voici le résultat:

    JS:

    var myApp = angular.module('myApp', []);

myApp.controller('Ctrl', function($scope) {

  $scope.myModel = { property1: 'hello1', property2: 'hello2' }

});


myApp.directive('editableFieldset', function () {
  return {
    restrict: 'E',
    scope: {
      model: '='
    },
    transclude: true,
    replace: true,
    template: '<div class="editable-fieldset" ng-click="edit()"><div ng-transclude></div></div>',
    link: function(scope, element) {
      scope.edit = function() {

        scope.editing = true;
      }
    },
    controller: ['$scope', function($scope) {

      this.getModel = function() {
        return $scope.model;
      }

    }]
  };
});

myApp.directive('editableString', function () {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      label: '@',
      field: '@'
    },
    template: '<div><label>{{ label }}</label><p>{{ model[field] }}</p></div>',
    require: '^editableFieldset',
    link: function(scope, element, attrs, ctrl) {

      scope.model = ctrl.getModel();
    }
  };
});

    HTML:

      <body ng-controller="Ctrl">
    <h1>Hello Plunker!</h1>
    <editable-fieldset model="myModel">
      <editable-string label="Some Property1:" field="property1"></editable-string>
      <editable-string label="Some Property2:" field="property2"></editable-string>
    </editable-fieldset>
  </body>
    Je vous remercie. Ce n'est pas vraiment utile pour accéder à une propriété dynamique, comme editing. Je suppose que je dois utiliser $watch de garder la trace de mon enfant directive?
    Aussi, je pense que pour constant, immuable attributs comme field et label ici, en les passant à une fonction qui génère le modèle serait plus rapide que de les ajouter en tant que liaisons? Il n'y a pas besoin de perdre du temps sur chaque digérer cycle de vérification de ces liaisons qui ne change pas, droite?
    N'est-ce pas la modification d'une propriété de l'enfant? Ou voulez-vous seulement modifier un enfant à la fois?
    J'aimerais modifier tous les enfants à la fois. L'édition est une propriété de la société mère que j'aimerais que les enfants soient en mesure de lire et de modifier leur état en fonction de sa valeur.
    Oui, une sorte de $watch de l'enfant. Probablement exposés par le contrôleur de parent.

    OriginalL'auteur Davin Tryon

  2. 7

    Vous pouvez obtenir l'accès à contrôleur de parent en passant attribut de l'enfant directive fonction de lien

    link: function (scope, element, attrs, parentCtrl) {
    parentCtrl.$scope.editing = true;
}
    vous obtenez ce quatrième param si vous: ... demandent: "^parentCtrl"
    Oui et le concept est expliqué dans la section "la Création de Directives qui Communiquent" dans la documentation de directives lien

    OriginalL'auteur user3036090