Para este escenario, tengo una página de HTML con algunos AngularJS directivas, controladores, etc.

Algo como esto:

<html>
<body>
  <div ng-controller="myCtrl">
     <ul><li ng-repeat="item in items">{{item.name}}</li></ul>
  </div>
  <div class="placeholder">
     ...new HTML here...
  </div>
</body>
</html>

Observe que no hay ningún ng-app directiva en la página. Yo no soy de confiar en la auto-arranque, sino que estoy utilizando el manual de arranque de método.

angular.bootstrap(document, ['myApp']);

En primer lugar, crear el módulo que será bootstrap para el documento. A continuación, como un determinado dinámicamente la lista de dependencias que se cargan, me fije algunos servicios, controladores, etc. Una vez que todo está listo que yo llamo el método bootstrap.

Todo esto funciona bien, hasta que JavaScript fuera de AngularJS anexa a la catedral en el ...new HTML here... ubicación. El nuevo HTML no es procesado por AngularJS.

Mi entendimiento es que usted necesita llamar a $scope.$apply() o $digest() o algo para que AngularJS para reconocer el nuevo HTML. Sin embargo, en mi ejemplo no hay ningún controlador de todo el nuevo HTML que viene. El entrante HTML puede tener este aspecto:

  <div ng-controller="myOtherCtrl">
     <h2>{{model.title}}</h2>
  </div>

En otras palabras, se basa en un controlador diferente en la aplicación del módulo.

  • Yo no puedo llamar a la angular.bootstrap método nuevo, porque la página ya está enlazado.
  • Yo no puedo llamar a $scope.$apply desde el interior del controlador debido a que el punto es que el código de controlador no está siendo llamado.
  • No veo una manera de obtener una referencia para el controlador con el fin de volver a aplicar o actualice.

He leído el Ifeanyi Isitor carga diferida post y la Ben Nadel post, sin embargo, no parece abordar HTML cargado fuera del contexto de un controlador existente.

No es una opción para mí hacer uso de AngularJS directivas para controlar la manipulación del árbol DOM. Es una parte separada de la arquitectura que utiliza ExtJS como el marco para la inyección de los nuevos elementos del DOM. Esto significa que no puede utilizar ngInclude por ejemplo.

Parece que yo podría llamar angular.module('myApp').$refresh(); o .$apply() pero que no es una opción. Lo que me estoy perdiendo?

No tengo ninguna experiencia en el uso de extJS y angular juntos, así que me temo que me puede ayudar. Sólo una cosa a tener en cuenta, sin embargo, AngularJS y ExtJS son tanto los marcos que están diseñados para ser el único marco de una webapp necesidades. El uso de dos marcos significa que cada cliente tiene para descargar muchos más datos, que es a menudo problemático, especialmente en dispositivos móviles. Vea si usted puede convertir el ExtJS parte de tu aplicación angularjs o viceversa.
ExtJS sólo entra en juego durante la experiencia de Creación y no tengo la opción de eliminarlo. Me gustaría usar Angular para su modularidad, 2-forma de unión, la capacidad de prueba, etc. Todos ExtJS hace en este caso es de renderizado de HTML en un lugar en el DOM. Ser capaz de obtener Angular reconocer que el cambio ocurrió, parece ser el desafío.

OriginalEl autor jedatu | 2013-12-18

6 Comentarios

  1. 9

    Que me he encontrado el mismo problema, he aquí lo que encontré :

    <div id="mController" ng-controller="mainController">
    </div>
    
    <div id="ee">
      2nd controller's view should be rendred here
    </div>

    y llamadas setCnt() función de inyectar y compilar el código html, y estará vinculado a la 2ª controlador:

    var app = angular.module('app', []);
    
    function setCnt() {
      //Injecting the view's html
      var e1 = angular.element(document.getElementById("ee"));
      e1.html('<div ng-controller="ctl2">my name: {{name}}</div>');
    
      //Compile controller 2 html
      var mController = angular.element(document.getElementById("mController"));
      mController.scope().activateView(e1);
    }
    
    app.controller("mainController", function($scope, $compile) {
      $scope.name = "this is name 1";
    
      $scope.activateView = function(ele) {
        $compile(ele.contents())($scope);
        $scope.$apply();
      };
    });
    
    app.controller("ctl2", function($scope) {
      $scope.name = "this is name 2";
    });

    he aquí un ejemplo para probar esto : http://refork.com/x4bc

    espero que esto ayude.

    buen trabajo, aunque $scope.$apply(); no tiene ningún uso en su ejemplo.

    OriginalEl autor Chtiwi Malek

  2. 2

    Permite tomar una pequeña plantilla de

     var  template = '<div ng-controller = "someController">';
          template += '<All html you want to add>'; 
          template += '</div>';

    Ahora si quieres añadir esta plantilla que tienes que hacer las dos cosas siguientes:

    1) crear una Instancia de su controlador de $controller

    2) Compilar la plantilla.

    //this creates a new scope
    var $scope = $rootScope.$new();  
    //Controller initialize with $scope
    $controller('someController',{$scope,$scope});   
    var templateEl = angular.element(template);
    //Now compile the template with scope $scope
    $compile(templateEl)($scope);
    angular.element('body').append(templateEL);
    y uno más para la última templateEL error tipográfico
    Esta es una buena respuesta, y la más cercana a lo que yo estaba buscando, pero carecía de la importante salvedad de que usted ya debe estar dentro de la «angular mundo» para tener acceso a cosas como «$rootScope» y «$controller». Si usted está tratando de hacer esto en una página donde no hay ningún otro controlador, o angulares directivas, (y tal vez ni siquiera ng-app), a continuación, esta respuesta será que hay: stackoverflow.com/a/28766083/999256

    OriginalEl autor Saurabh Ahuja

  3. 0

    Creo ng-include podría ayudar, se carga una página parcial en el elemento y recopila y procesa como cualquier otra parte de su página web.

    Si Este elemento es la vista principal de la aplicación web, y desea cargar diferentes ‘pantallas’, dependiendo de la dirección url, ng-view puede venir bien.

    Gracias, he actualizado a la pregunta de aclarar qué es la inyección de los elementos del DOM. Yo no creo que pueda confiar en ng-include porque necesita el src de la dirección URL que se carga y se inyecta. ng-view puede ser vale la pena cavar en. Mi única preocupación es que yo no sé realmente donde el HTML se inyecta en la DOM por lo menos que se puede poner el ng-vista la directiva sobre el cuerpo de la etiqueta, yo no creo que funcione.

    OriginalEl autor bigblind

  4. 0

    He seguido este proceso y a mí me funcionó:

    //Some variables
    var $controllerElement = angular.element('css-selector-to-the-controller-element');
    var $appElement = angular.element('css-selector-to-ng-app-element');
    
    //compiling and applying /digesting the scope.
    $appElement.injector().invoke(function($compile) {
        var scope = $controllerElement.scope();
        $compile($controllerElement)(scope);
        scope.$apply();
    });

    Referencia: Angular.inyector

    OriginalEl autor Nikhil Girraj

Dejar respuesta

Please enter your comment!
Please enter your name here