angularjs - que - ¿Cómo incluir uno parcial en otro sin crear un nuevo ámbito?

ng-view ejemplo

Question

Tengo estas rutas.

// index.html
<div ng-controller="mainCtrl">
    <a href=''#/one''>One</a>
    <a href=''#/two''>Two</a>
</div>​​​​​​​​​
<div ng-view></div>

Y así es como estoy cargando los parciales en mi ng-view .

// app.js
​var App = angular.module(''app'', []);​​​​​​​
App.config([''$routeProvider'', function($routeProvider) {
    $routeProvider.when(''/one'', {template: ''partials/one.html'', controller: App.oneCtrl});
    $routeProvider.when(''/two'', {template: ''partials/two.html'', controller: App.twoCtrl});
  }]);

Cuando hago clic en los enlaces, me muestra el marcado apropiado dentro de la vista ng. Pero cuando intento incluir partials/two.html dentro de partials/two.html partials/one.html usando ng-include , lo muestra correctamente pero crea un ámbito diferente, así que no puedo interactuar con él.

// partials/two.html - markup
<div ng-controller="twoCtrl">I''m a heading of Two</div>

// partials/one.html - markup
<div ng-controller="oneCtrl">I''m a heading of One</div>
<div ng-include src="''partials/two.html''"></div>

¿Cómo resuelvo este problema? O ¿Hay alguna otra manera de lograr el mismo resultado?

Answer 1

Entonces, esta no es una respuesta a esta pregunta, pero la hice aquí buscando algo similar y espero que esto ayude a otros.

Esta directiva incluirá un parcial sin crear un nuevo ámbito. Para un ejemplo, puede crear un formulario en el parcial y controlar ese formulario desde el controlador principal.

Aquí hay un enlace al Repo que he creado para él.

buena suerte :-)

-James Harrington

Answer 2

La documentación para ngInclude indica que "esta directiva crea un nuevo ámbito". así que esto es por diseño.

Dependiendo del tipo de interacción que esté buscando, puede querer echar un vistazo a esta publicación para una forma de compartir datos / funcionalidad entre los dos controladores a través de un servicio personalizado .

Answer 3

Puede escribir su propia directiva de inclusión que no cree un nuevo ámbito. Por ejemplo:

MyDirectives.directive(''staticInclude'', function($http, $templateCache, $compile) {
    return function(scope, element, attrs) {
        var templatePath = attrs.staticInclude;
        $http.get(templatePath, { cache: $templateCache }).success(function(response) {
            var contents = element.html(response).contents();
            $compile(contents)(scope);
        });
    };
});

Puedes usar esto como:

<div static-include="my/file.html"></div>

Answer 4

Realmente puedes hacer esto sin usar un servicio compartido. $ scope. $ emit (...) puede enviar eventos al $ rootScope, que puede escucharlos y retransmitir a los ámbitos secundarios.

Demostración: http://jsfiddle.net/VxafF/

Referencia: http://www.youtube.com/watch?v=1OALSkJGsRw (ver el primer comentario)