angularjs - switch - Acceso al alcance de los padres en la Directiva Transcluida
ng-model (4)
Me gustaría acceder al alcance de una directiva principal, pero parece que no puedo obtener la combinación correcta de configuraciones. ¿Es esto posible y es el enfoque correcto?
Realmente quiero evitar poner algo como SOME_CONST (que me ayudaría a hacer actualizaciones de DOM a través del flujo de control) en MyCtrl
<div ng-controller="MyCtrl">
<parent>
<child></child>
</parent>
</div>
var myApp = angular.module(''myApp'',[]);
function MyCtrl($scope) {
$scope.obj = {prop:''foo''};
}
myApp.directive(''parent'', function() {
return {
scope: true,
transclude: true,
restrict: ''EA'',
template: ''<div ng-transclude><h1>I/'m parent {{obj.prop}}<h1></div>'',
link: function(scope, elem, attrs) {
scope.SOME_CONST = ''someConst'';
}
}
});
myApp.directive(''child'', function() {
return {
restrict: ''EA'',
template: ''<h1>I/'m child.... I want to access my parent/'s stuff, but I can/'t. I can access MyCtrlScope though, see <b>{{obj.prop}}</b></h1> how can I access the <b>SOME_CONST</b> value in my parent/'s link function? is this even a good idea? {{SOME_CONST}}. I really don/'t want to put everything inside the MyCtrl'',
}
});
Por favor vea este fiddle
Gracias
Acabo de tener el mismo problema y finalmente lo resolví con el manual angular;)
En resumen: necesita usar un controlador en su directiva principal y requiere ese controlador en su directiva secundaria . De esta manera usted puede obtener las propiedades de sus padres.
Consulte https://docs.angularjs.org/guide/directive Capítulo: Creación de directivas que se comunican
Cambié su violín para usar un controlador, ahora puede acceder a su constante: https://jsfiddle.net/bbrqdmt3/1/
var myApp = angular.module(''myApp'',[]);
function MyCtrl($scope) {
$scope.obj = {prop:''foo''};
}
myApp.directive(''parent'', function() {
return {
scope: true,
transclude: true,
restrict: ''EA'',
template: ''<div ng-transclude><h1>I/'m parent {{obj.prop}}<h1></div>'',
controller: function($scope) {
this.getConst= function() {
return ''someConst'';
}
},
}
});
myApp.directive(''child'', function() {
return {
restrict: ''EA'',
require : ''^parent'',
link: function(scope, element, attrs, ctrl) {
scope.value= ctrl.getConst();
},
template: ''<h1>I/'m child.... I want to access my parent/'s stuff, but I can/'t. I can access MyCtrlScope though, see <b>{{obj.prop}}</b></h1> how can I access the <b>SOME_CONST</b> value in my parent/'s link function? is this even a good idea? {{value}}. I really don/'t want to put everything inside the MyCtrl'',
}
});
Con transclude: true y scope: true , la directiva parent crea dos nuevos ámbitos:
El alcance 004 es un resultado del scope: true , y el alcance 005 es el resultado de la transclude: true . Como la directiva child no crea un nuevo alcance, utiliza el alcance 005 transcluido. Como puede ver en el diagrama, no hay una ruta desde el alcance 005 al alcance 004 (excepto a través de la propiedad privada $$ prevSibling, que va en la dirección opuesta a $$ nextSibling - pero no use esos.)
La solución de @ joakimbl es probablemente la mejor aquí, aunque creo que es más común definir una API en el controlador de la directiva principal, en lugar de definir propiedades en this :
controller: function($scope) {
$scope.SOME_CONST = ''someConst'';
this.getConst = function() {
return $scope.SOME_CONST;
}
}
Luego en la directiva child :
link:function(scope,element,attrs,parentCtrl){
scope.SOME_CONST = parentCtrl.getConst();
},
Así es como funcionan las directivas de tabs y pane en la página de inicio de Angular (ejemplo de "Crear componentes").
En los argumentos del enlace fn, después del controlador, hay una leyenda de transclusión.
myApp.directive(''parent'', function() {
return {
scope: true,
transclude: true,
restrict: ''EA'',
template: ''<div><h1>I''m a parent header.</h1></div>'',
link: function (scope, el, attrs, ctrl, transclude) {
transclude(scope, function (clone, scope) {
element.append(clone); // <-- will transclude it''s own scope
});
},
controller: function($scope) {
$scope.parent = {
binding: ''I/'m a parent binding''
};
}
}
});
myApp.directive(''child'', function() {
return {
restrict: ''EA'',
require:''^parent'',
scope:true,
link:function(scope,element,attrs,parentCtrl){
},
template: ''<div>{{parent.binding}}</div>'' // <-- has access to parent''s scope
}
});
Normalmente, la forma en que accede a una variable de alcance principal en una directiva es a través de un enlace bidireccional ( scope:{model:''=model''} - vea la guía angular sobre directivas ) en la configuración de directivas), pero ya que está utilizando la transclusión Esto no es tan sencillo. Si la directiva secundaria siempre será secundaria de la directiva principal, puede configurarla para que requiera la principal y luego acceder al controlador principal en la función de vínculo secundario:
myApp.directive(''parent'', function() {
return {
scope: true,
transclude: true,
restrict: ''EA'',
template: ''<div ng-transclude><h1>I/'m parent {{obj.prop}}<h1></div>'',
controller: function($scope) {
$scope.SOME_CONST = ''someConst'';
this.SOME_CONST = $scope.SOME_CONST;
}
}
});
myApp.directive(''child'', function() {
return {
restrict: ''EA'',
require:''^parent'',
scope:true,
link:function(scope,element,attrs,parentCtrl){
scope.SOME_CONST = parentCtrl.SOME_CONST;
},
template: ''<h1>I/'m child.... I want to access my parent/'s stuff, but I can/'t. I can access MyCtrlScope though, see <b>{{obj.prop}}</b></h1> how can I access the <b>SOME_CONST</b> value in my parent/'s link function? is this even a good idea? {{SOME_CONST}}. I really don/'t want to put everything inside the MyCtrl'',
}
});
Ver esta actualización: http://jsfiddle.net/uN2uv/