templateurl - angularjs directives parameters
Transclude directiva angular crear nuevo alcance? (2)
El problema es que la directiva ngController crea su propio alcance. Cuando lo haces <modal ng-controller="MyController"> el ámbito ngController es un hermano a modal por lo que modal no puede ver más (de lado en cierto sentido) en ese controlador.
Funciona cuando ngController es padre porque está utilizando scope: false que hace que su directiva herede su alcance de su principal.
En lugar de utilizar una directiva ngController separada, puede adjuntar un controlador a su directiva :
app.directive("modal", function() {
return {
controller: function($scope, $location) {
console.log("controller scope ", $scope.$id)
$scope.name = ''World'';
}
}
Este enfoque le dará a su directiva una buena encapsulación ya que no dependerá de un controlador externo, lo cual es bueno. Una ventaja es que ya no es necesario coordinar múltiples ámbitos.
Si necesita varias directivas para comunicarse, puede usar require para permitir que varias directivas compartan el acceso al controlador de una de las directivas principales. Este es el enfoque que Angular toma internamente (por ejemplo, en ''ng-switch` )
Estoy intentando crear un componente directivo para las ventanas modales, que se ocupan del comportamiento modal, como abrir, cerrar, ocuparse de zIndex, etc.
El contenido de los componentes modales es controlado por el controlador. Hasta ahora la idea es buena, pero cuando trato de tener
<modal ng-controller="MyController">
Some content which will be transcluded with dynamic {{value}} from MyController
</modal>
Falló y no representa {{value}} Tengo que ajustar modal en el controlador
<div ng-controller="MyController">
<modal>
Some content which will be transcluded with dynamic {{value}} from MyController
</modal>
</div>
¿Hay alguna manera, cómo hacer que el primer ejemplo funcione, o es imposible y por qué angular hacerlo de esa manera?
Hay un ejemplo completo con plunker al final.
var app = angular.module(''plunker'', []);
app.directive("modal", function() {
return {
restrict:''E'',
replace:true,
transclude:true,
scope: false,
template:''<div class="modal">Modal scope {{$id}}<div ng-transclude></div></div>'',
link: function($scope) {
console.log("directive scope ", $scope.$id)
}
}
})
app.controller(''DetailControl'', function($scope, $location) {
console.log("controller scope ", $scope.$id)
$scope.name = ''World'';
});
y este HTML
<body>
main scope {{$id}}
Controller on same element as modal<br>
<modal ng-controller="DetailControl">
<div>
content scope (transclude) {{$id}}<br>
Some content of modal window. The name is {{name || ''-unknown-''}}
</div>
</modal>
Controller outside modal
<div ng-controller="DetailControl">
Controller scope {{$id}}
<modal>
<div>
content scope (transclude) {{$id}}<br>
Some content of modal window. The name is {{name || ''-unknown-''}}
</div>
</modal>
</div>
<body>
aquí está Plunker http://plnkr.co/edit/WOgZKB3e0bQUASMhFVOp?p=preview
intente utilizar transcluir con alcance de paso: http://docs.angularjs.org/api/ng.$compile
transcludeFn -> alcance
"transcludeFn - Una función de vinculación de transcluir preenlazada al ámbito de transclusión correcto. El alcance puede ser anulado por un primer argumento opcional. Esto es lo mismo que el parámetro $ transclude de la función de los controladores de directivas ([scope], cloneLinkingFn)".