cómo incluir un archivo javascript específico para cada vista angularjs

El problema que tengo es que el archivo loadjs no siempre se carga antes de vincularlo a la cuadrícula. He leído otras publicaciones sobre el uso de directivas, pero no entiendo cómo usarlas en mi caso.cómo incluir un archivo javascript específico para cada vista angularjs

El código se debe cargar una vista específica cada vista a su vez tiene un archivo JavaScript específica que necesita ser cargado antes de la vista es finalmente renered

Así vista 1 podría ser una cuadrícula de datos con datagrid.js dependencia archivo y View2 es una lista con la dependencia de listview.js

Gracias.

Function MyCtrl1($scope) { 
$scope.$on('$viewContentLoaded', function() { 

    //Load file if not already loaded 
    isloadjscssfile("js/model/gridmodel.js", "js") 


    $("#grid").kendoGrid({ 
        dataSource: getdatasource(), 
        pageable: true, 
        height: 400, 
        toolbar: ["create"], 
        columns: [ 
         "ProductName", 
         { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "150px" }, 
         { field: "UnitsInStock", title:"Units In Stock", width: "150px" }, 
         { field: "Discontinued", width: "100px" }, 
         { command: ["edit", "destroy"], title: "&nbsp;", width: "210px" }], 
        editable: "inline" 
       }); 
});

}

Fuente

2012-09-15 dan

No ayudar a sus colas Aunque no debe acceder a DOM en sus controladores, debe escribir una directiva kendoGrid para manejar eso, consulte http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller (Utilizando la sección Controladores correctamente) – Guillaume86

No se puede. Angular no carga partes de JavaScript desde una plantilla.

Lo que debe hacer es incluirlos en su aplicación principal de todos modos. Todos los controladores deben cargarse mientras se inicia la aplicación principal. (Aquí es donde se pone su directiva npApp)

Fuente

2012-09-15 12:13:15

Entonces, si tengo 20 vistas en lugar de ser capaz de cargar dinámicamente un archivo js para cada vista, tengo que codificar con hardcode src = mygrid.js en mi página main.html ?? Debo malinterpretar, ya que esto causaría que cada carga de página tenga javascript que no es necesario para esa vista. – dan

Hay otras maneras de cargar un archivo javascript dinámicamente pero esto está fuera de angular. Si tiene 20 vistas corresponde a 20 controladores, puede ser un archivo grande dependiendo del controlador, pero si tiene métodos compartidos, visite http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller (Section Controller Herencia) O bien, puede crear un servicio según sus necesidades –

bien, así que en el ejemplo anterior, estoy cargando el archivo dinámicamente usando isloadjscssfile, que agrega el archivo al encabezado pero usando el evento viewContentLoaded para enlazar a la grilla pero no garantiza el archivo está cargado Donde en mi código debería colocar el método isloadjscssfile ("js/model/gridmodel.js", "js") y dónde debería colocar el código de cuadrícula Bind $ grid. Parece que viewcontentload es para que un evento tarde funcione correctamente. Lo que necesito es un lugar que diga si view1 entonces antes doc.ready loadfile luego en doc.ready bind to grid – dan

intentar algo como esto (que probablemente podría ser "más angular", pero por el momento funciona para mí):

angular.module('MyApp').controller('MyCtrl1', ['$scope', function ($scope) { 

    window.initialize = function() { 
     // code to execute after your JS file referenced in the loadScript function loads 
    } 

    var loadScript = function() { 
     var script = document.createElement('script'); 
     script.type = 'text/javascript'; 
     script.src = 'http://www.myserver.com/file.js?callback=initialize'; 
     document.body.appendChild(script); 
    } 

    $scope.$on('$viewContentLoaded', function() { 
     loadScript(); 
    }); 

}]);

Fuente

2013-11-27 23:54:38

Si desea este en la directiva, se puede hacer algo como esto

.directive('require', function(){ 
    return{ 
     restrict: 'E', 
     scope: { 
     scriptSrc: '@' 
     }, 
     template:'<script type="text/javascript" src="{{ scriptSrc }}"></script>', 
     link: function(scope, elm, attr){ 
     .... 
     } 
     replace: true 
    } 
});

HTML:

<require script-src="/foo.js"> 
<require script-src="/bar.js">

Fuente

2014-04-02 05:18:49 a8m

No funciona, el script no se carga a tiempo y el controlador no puede acceder a él. –

cómo incluir un archivo javascript específico para cada vista angularjs

Respuesta

Cuestiones relacionadas