Comunicazione tra direttive angolari e controllore genitore

4

Sto provando a fornire una convenzione, o standard, affinché un controllore genitore possa comunicare con una direttiva in Angular.

Fondamentalmente la direttiva avrà un oggetto "settings" contenente i callback e i dati iniziali ricevuti dal controller e un oggetto "api" contenente funzioni pubbliche.

Ho creato un servizio chiamato "gabby" ma non fa molto, solo una comodità.

HTML

  <div ng-app="myApp" ng-controller="appCtrl">
    <my-dir settings="myDirSettings" api="myDirApi"></my-dir>
  </div>

Controller principale

  angular.module('myApp').controller('appCtrl', function($scope) {
    $scope.myDirSettings = {
      onStart: function() {
        //start the logic
      },
      defaultName: 'My App Name'
    };

    $scope.someClick = function() {
      $scope.myDirApi.fetchData();
    };        
  });

direttiva

Solo angolare
  angular.module('myApp').directive('myDir', function() {
    return {
      controller: 'myDirCtrl',
      scope: { settings: '<', api: '=' }
    };
  });
O con il servizio Gabby
  angular.module('myApp').directive('myDir', function(gabby) {
    return {
      controller: 'myDirCtrl',
      scope: gabby.scope()
    };
  });

Controller della direttiva

Solo angolare
  angular.module('myApp').controller('myDirCtrl', function($scope) {
      angular.extend($scope, {
          onStart: function() {},
          onSubmit: function() {},
          defaultName: 'John'  
        }, $scope.settings);
      $scope.api = $scope.api || {};
      $scope.api.clearValues = function() {
          //do magic things
      };
      $scope.api.fetchData = function() {
          //do magic things
      };
      $scope.api.getValues = function() {
          //do magic things
      };        

      $scope.onSomeKeyPress = function() {        
        $scope.onStart();
      };
});
O con il servizio Gabby
  angular.module('myApp').controller('myDirCtrl', function($scope, gabby) {
    gabby.for($scope)
      .settings({
          //These are the default settings for the directive,
          //allowing the reader to easily understand what can
          //be passed to the directive
          onStart: function() {},
          onSubmit: function() {},
          defaultName: 'John'  
        })
      .api({
          //These are the public functions of the directives
          clearValues: function() {
            //do magic things
          },
          fetchData: function() {
            //do magic things
          },
          getValues: function() {
            //do magic things
          }
      });

    $scope.onSomeKeyPress = function() {        
      $scope.onStart();
    };
  });

Maggiori dettagli: link

  • Sto cercando di risolvere un problema già risolto?
  • Pensi che questo approccio sia leggibile e chiaro?
posta yellowblood 15.03.2017 - 10:40
fonte

1 risposta

1

Di solito utilizzi un servizio come intermediario tra la direttiva e il componente. Cambia lo stato di un servizio in una direttiva e il controllore può guardare i dati nel servizio per qualsiasi cosa sia interessata.

    
risposta data 08.04.2017 - 04:59
fonte

Leggi altre domande sui tag