Quiero compartir la $scope entre las dos directivas:

One23SRCApp.directive('directive1',function() {
    return {
        restrict: "A",
        scope:true,
        link: function (scope, element, attrs) {
           scope.tablename = "table";
        }
    };
});


One23SRCApp.directive('directive2',function() {
    return {
        restrict: "A",
           link: function (scope, element, attrs) {
           var tablename = scope.tablename;
        }
    };
})

En el HTML, tengo:

<input type="text" directive2 placeholder="Search Models..."> 

<table directive1>
  <tr>
     <td>column1</td>
     <td>column1</td>
   </tr>
</table>

He creado una directiva llamada «1» aislado con el alcance, asignar el nombre de «la mesa» a la scope.tablename de la propiedad. Yo no soy capaz de acceder a este ámbito de la propiedad en la otra directiva.

Entonces, ¿cómo puedo acceder al ámbito de aplicación de una directiva en otro?

¿Cómo son las directivas organizado en html?
he actualizado mi pregunta, tengo que apliquen la directiva sobre diferentes elementos.

OriginalEl autor Shivkumar | 2013-08-27

4 Comentarios

  1. 5

    Usted puede hacer un $rootScope.$broadcast en los elementos que desea sincronizar a través de la directiva.

    O puede pasar un objeto a su 1 aislado alcance, que actuaría como un mecanismo de comunicación. En este objeto si cambia sub propiedad como tablename, que afectaría en el ámbito primario.

    Algo como

    One23SRCApp.directive('directive1',function() {
        return {
            restrict: "A",
            scope:{tableconfig:'='},
            link: function (scope, element, attrs) {
               scope.tableconfig.tablename= "table";
            }
        };
    });
    
    
    One23SRCApp.directive('directive2',function() {
        return {
            restrict: "A",
               link: function (scope, element, attrs) {
               var tablename = scope.tableconfig.tablename;
            }
        };
    })

    El HTML se convierte en

    <table directive1 tableconfig='tableconfig'>
      <tr>
         <td>column1</td>
       <td>column1</td>
       </tr>
    </table>

    El controlador debe tener este objeto define

    $scope.tableconfig={};

    El uso de $rootScope es un anti-patrón
    Esta es una mala práctica, aislado de su ámbito de aplicación está contaminado si solo se desea compartir el mismo ámbito, entre las directivas.
    Me quedé relacionados con este tema con muy mal.Soy nuevo en angular pudo ver este enlace stackoverflow.com/questions/43521905/… gracias

    OriginalEl autor Chandermani

  2. 20

    AngularJS apoya a la directiva de los controladores, que son los controladores que son compartidos entre varias directivas que requieren el mismo controlador. Esto le permite acceder y modificar tableConfig en cualquier directiva que requiere que el controlador, sin tener que declarar por separado un servicio o evento. Para obtener más información, consulte «Creación de Directivas que se Comunican» en el las directivas de la documentación.

    Esta es la forma en ngModel y ngForm de trabajo, por ejemplo.

    Bueno, yo había perdido la opción por completo.
    no puede encontrar nada en «controlador » constructor» hay más. Pero tal vez es la «Creación de Directivas que se Comunican a»-sección en la que estás hablando?
    Tienes razón, la documentación ha cambiado, estoy actualizando la respuesta. Gracias!

    OriginalEl autor Steve Klösters

  3. 16

    Mi sugerencia sería la de utilizar un recurso compartido, por ejemplo, un servicio. Los servicios son únicos, lo que significa que hay solamente una instancia de cada servicio, así que usted puede utilizar para compartir datos entre las directivas, los controladores, los ámbitos y aun cuando el cambio de página a través de enrutamiento.

    Definiría el servicio de recursos como este:

    app.factory("MyResource",function(){
        return {};
    });

    Entonces podría inyectar ese servicio en sus directrices (y controladores si es necesario) y el uso de esta.

    One23SRCApp.directive('directive1', ['MyResource', function(MyResource) {
        return {
            restrict: "A",
            scope:true,
            link: function (scope, element, attrs) {
               var resource = MyResource;
               resource.name = 'Foo';
            }
        };
    });
    One23SRCApp.directive('directive2', ['MyResource', function(MyResource) {
        return {
            restrict: "A",
            link: function (scope, element, attrs) {
               var resource = MyResource;
               console.log(resource.name);
            }
        };
    });

    Directive2 de registro ‘Foo’ desde el recurso compartido. A pesar de asegurarse que sus directrices se ejecutan en el orden correcto!

    **

    También puedes hacer una de dos vías de enlace de datos de cada directiva en el ámbito primario (véase el Chandermani respuesta para eso), pero la de arriba es una muy útil y potente para obtener datos donde usted lo necesite, sin tener la posibilidad de emitir o seguir la pista de exactamente donde están las cosas en el html.

    Edición:
    Mientras que el anterior es muy útil a la hora de compartir información entre los controladores y rutas, echa un vistazo stevuu respuesta. Parece mejor para las directivas (aunque no lo he probado).

    OriginalEl autor Erik Honn

  4. 4

    La muestra de Chandermani está trabajando. Sin embargo de esta manera usted todavía tiene que asignar el atributo en su directiva y su aislados no más. Esta es una de la contaminación en el ámbito…

    Mi consejo es compartir su aislado ámbito mediante el controlador de un paso de esta manera.
    Su casa, su código! Piensa antes de código, pero la mayoría de todos… ¡a DISFRUTAR!

    One23SRCApp.directive('directive1',function() {
        return {
             restrict: "A",
             scope: true,
             controller : function($scope){
                  $scope.tableconfig= {};
                  this.config = function (){ 
                       return $scope.tableconfig;
                  }
             },
             link: function (scope, element, attrs) {
                 scope.tableconfig.tablename= "table";
             }
        }
    });
    
    
    One23SRCApp.directive('directive2',function() {
         return {
               restrict: "A",
               //^ -- Look for the controller on parent elements, not just on the local scope
               //? -- Don't raise an error if the controller isn't found
               require: "^directive1",
               link: function (scope, element, attrs) {
                   var tablename = scope.config().tablename;
               }
        }
    });

    Uso

    <!-- Notice, no need to share a scope as attribute -->
    <div directive1>
        <div directive2>
        </div>
    </div>

    OriginalEl autor Joris Brauns

Dejar respuesta

Please enter your comment!
Please enter your name here