Reemplace el código html de un elemento con el contenido de un externo de la plantilla en una directiva?

Estoy tratando de crear una directiva, que es una barra lateral en mi concha de la página que va a cambiar de acuerdo siempre de una nueva ruta es golpeado, y llenará de sí mismo con el sub menú de elementos relevantes para que los padres de la ruta. Tengo 4 menús diferentes que son externos plantillas y quiero que el contenido de los archivos html para reemplazar el menú, la función de enlace de mi directiva se parece a esto hasta ahora:

link: function(scope, element, attrs, ngModel) {
      scope.$on("$routeChangeSuccess", function (event, current, previous) {
                   element.html('<div ng-include=\'enterprisesMenu.html\'></div>');
                });
      };

Pero el elemento no está actualizando, sin embargo cuando yo uso plantillas en línea los elementos que se actualiza de acuerdo, pero ya que cada plantilla es complejo prefiero no tener que html dentro de mi directiva, también he intentado element.html('<div ng-include src=\'enterprisesMenu.html\'></div>');

Alguna idea?

  • No es del 100% en el tema, pero tu pregunta suena como usted debe leer: stackoverflow.com/questions/14994391/…
  • Gracias, sí ya he leído que, un poco difícil de integrar en su práctica, aunque. Lo que sería una forma más angular, de manera de lograr esta funcionalidad en tu opinión?

2 Kommentare

  1. 5

    Intentar $compile:

    element.html($compile('<div ng-include=\'enterprisesMenu.html\'></div>')
    (scope));   
    • Gracias que casi hizo el truco, pero tuve que poner comillas dobles alrededor de la plantilla, terminó así: element.html($compile('<div ng-include="\'enterprisesMenu.html\'"></div>')(scope));
  2. 2

    Usted podría conseguir este resultado por dinámicamente ng-incluyendo la plantilla deseada. Por ejemplo:

    HTML:

    <div class="your-sidebar" ng-controller="SidebarCtrl">
        <div ng-include="sidebar.url" ></div>
    </div>

    Controlador:

    app.controller("SidebarCtrl", function($scope) {
        $scope.sidebar = {
            url: "initial-url"
        };
        $scope.$on("$routeChangeSuccess", function(event, current, previous) {
            //decide potentially new value for $scope.sidebar.url
            $scope.sidebar.url = newValueCalculatedAbove;
        });
    });

    Esta solución no requiere de una directiva, sólo un controlador extra. Se puede hacer con la directiva también, el código HTML anterior es la plantilla de la directiva y el código JS el controlador de (sin función de enlace es necesario).

    • Gracias. Sí yo estaba pensando si se utiliza un controlador o una directiva, controlador parecía más sencillo desde el principio, pero de alguna manera yo estaba bajo la impresión de las directivas son el camino a seguir. Cuál es el enfoque más angular? La directiva o controlador?
    • Realmente no importa para este caso, pero me gustaría ir por la directiva. Ver el último párrafo de la respuesta; el código es el mismo, sólo tienes que envolver en una declaración de directiva. En cualquier caso me gustaría evitar el uso de $compile, ya que hay una alternativa más simple – el ng-include (pero esto es una opinión personal).

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea