javascript - formularios - page title angular 4

AngularJS Cómo agregar HTML de forma dinámica y vincular al controlador

Question

Estoy empezando con angularJS y estoy luchando por encontrar la arquitectura adecuada para lo que estoy tratando de hacer. Tengo una aplicación de una sola página, pero la URL siempre debe permanecer igual ; No deseo que el usuario pueda navegar a ninguna ruta más allá de la raíz. En mi aplicación, hay un div principal que necesitará para alojar diferentes puntos de vista. Cuando se accede a una nueva vista, quiero que se haga cargo de la pantalla en el div principal. Las vistas cargadas de esta forma pueden descartarse o quedarse como ocultas en el DOM. Me interesa ver cómo podría funcionar cada una de ellas.

He encontrado un ejemplo aproximado de lo que estoy tratando de hacer. Ver ejemplo de trabajo aquí en este Plunk. Básicamente quiero cargar dinámicamente HTML en el DOM y tener controladores angularJS estándar para enganchar en ese nuevo HTML. ¿Hay una manera mejor / más simple de hacer esto que usando la directiva personalizada que tengo aquí y usando $ compile () para conectar a angular? Tal vez hay algo así como el enrutador, pero no requiere que la URL tenga cambios para operar.

Esta es la directiva especial que estoy usando hasta ahora (tomada de otra publicación SO):

// Stolen from: http://stackoverflow.com/questions/18157305/angularjs-compiling-dynamic-html-strings-from-database
myApp.directive(''dynamic'', function ($compile) {
return {
replace: true,
link: function (scope, ele, attrs) {
scope.$watch(attrs.dynamic, function(html) {
if (!html) {
return;
}
ele.html((typeof(html) === ''string'') ? html : html.data);
$compile(ele.contents())(scope);
});
}
};
});

Gracias,

Andy

Answer 1

Hay otra manera también

1. paso 1: crea un archivo sample.html
2. paso 2: crea una etiqueta div con algunos id = loadhtml Ej: <div id="loadhtml"></div>

3. paso 3: en cualquier controlador

    var htmlcontent = $(''#loadhtml '');
   htmlcontent.load(''/Pages/Common/contact.html'')
   $compile(htmlcontent.contents())($scope);

Esto cargará una página html en la página actual

Answer 2

Necesitaba ejecutar una directiva DESPUÉS de cargar varias plantillas, así que creé esta directiva:

utilModule.directive(''utPreload'',
[''$templateRequest'', ''$templateCache'', ''$q'', ''$compile'', ''$rootScope'',
function($templateRequest, $templateCache, $q, $compile, $rootScope) {
''use strict'';
var link = function(scope, element) {
scope.$watch(''done'', function(done) {
if(done === true) {
var html = "";
if(scope.slvAppend === true) {
scope.urls.forEach(function(url) {
html += $templateCache.get(url);
});
}
html += scope.slvHtml;
element.append($compile(html)($rootScope));
}
});
};
var controller = function($scope) {
$scope.done = false;
$scope.html = "";
$scope.urls = $scope.slvTemplate.split('','');
var promises = [];
$scope.urls.forEach(function(url) {
promises.add($templateRequest(url));
});
$q.all(promises).then(
function() { // SUCCESS
$scope.done = true;
}, function() { // FAIL
throw new Error(''preload failed.'');
}
);
};
return {
restrict: ''A'',
scope: {
utTemplate: ''='', // the templates to load (comma separated)
utAppend: ''='', // boolean: append templates to DOM after load?
utHtml: ''='' // the html to append and compile after templates have been loaded
},
link: link,
controller: controller
};
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div class="container-fluid"
ut-preload
ut-append="true"
ut-template="''html/one.html,html/two.html''"
ut-html="''<my-directive></my-directive>''">
</div>

Answer 3

Para aquellos, como yo, que no tenían la posibilidad de utilizar la directiva angular y estaban "atascados" fuera del alcance angular, aquí hay algo que podría ayudarlo.

Después de horas buscando en la web y en el documento angular, he creado una clase que compila HTML, lo coloca dentro de un objetivo y lo vincula a un ámbito ( $rootScope si no hay $scope para ese elemento)

/**
* AngularHelper : Contains methods that help using angular without being in the scope of an angular controller or directive
*/
var AngularHelper = (function () {
var AngularHelper = function () { };
/**
* ApplicationName : Default application name for the helper
*/
var defaultApplicationName = "myApplicationName";
/**
* Compile : Compile html with the rootScope of an application
* and replace the content of a target element with the compiled html
* @$targetDom : The dom in which the compiled html should be placed
* @htmlToCompile : The html to compile using angular
* @applicationName : (Optionnal) The name of the application (use the default one if empty)
*/
AngularHelper.Compile = function ($targetDom, htmlToCompile, applicationName) {
var $injector = angular.injector(["ng", applicationName || defaultApplicationName]);
$injector.invoke(["$compile", "$rootScope", function ($compile, $rootScope) {
//Get the scope of the target, use the rootScope if it does not exists
var $scope = $targetDom.html(htmlToCompile).scope();
$compile($targetDom)($scope || $rootScope);
$rootScope.$digest();
}]);
}
return AngularHelper;
})();

Cubrió todos mis casos, pero si encuentra algo que debería agregarle, no dude en comentar o editar.

Espero que ayude

Answer 4

Vea si este ejemplo proporciona alguna aclaración. Básicamente configura un conjunto de rutas e incluye plantillas parciales basadas en la ruta. Establecer ng-view en su index.html principal le permite inyectar esas vistas parciales.

La porción de configuración se ve así:

 .config([''$routeProvider'', function($routeProvider) {
$routeProvider
.when(''/'', {controller:''ListCtrl'', templateUrl:''list.html''})
.otherwise({redirectTo:''/''});
}])

El punto de entrada para inyectar la vista parcial en su plantilla principal es:

<div class="container" ng-view=""></div>

Answer 5

ngInclude directiva ngInclude . En el ejemplo a continuación, ni siquiera necesita escribir ningún javascript. Las plantillas pueden vivir fácilmente en una url remota.

Aquí hay una demostración en funcionamiento: http://plnkr.co/edit/5ImqWj65YllaCYD5kX5E?p=preview

<p>Select page content template via dropdown</p>
<select ng-model="template">
<option value="page1">Page 1</option>
<option value="page2">Page 2</option>
</select>
<p>Set page content template via button click</p>
<button ng-click="template=''page2''">Show Page 2 Content</button>
<ng-include src="template"></ng-include>
<script type="text/ng-template" id="page1">
<h1 style="color: blue;">This is the page 1 content</h1>
</script>
<script type="text/ng-template" id="page2">
<h1 style="color:green;">This is the page 2 content</h1>
</script>