Truc 14 : Partager un modèle entre plusieurs Controleurs à l’aide de $parent.

Introduction:


PArfois, on doit partager un modèle entre plusieurs controleurs Angular.

Comment faire ?


Soit avec sune factory, soit avec $parent, ici nous voyons le cas avec $parent .

Le code:


<html ng-app="trucs">
	<head>
		<title> partager un modèle pour plusieurs controleurs grâce à $parent</title>
		<meta charset="utf8" >
		<!-- -----------------------------------------------DEBUT DU CHARGEMENT DES LIBRAIRIES------------------------ -->

		<!--	APPEL LIB ANGULAR -->
		<script	type="text/javascript" 	src="angular-1.3.13/angular.min.js"></script>
		<script src="librairies/angular-locale_fr-fr.js"></script>

		<!--	APPEL LIB BOOTSTRAP -->
		<script src="librairies/ui-bootstrap.min.js"></script>
		<link rel="stylesheet" href="librairies/bootstrap/css/bootstrap.min.css">

		<script>
		var app = angular.module('trucs',['ui.bootstrap']);

		app.controller("MyCtrl", function ($scope) { 

			$scope.name = "Peter";
			$scope.user = {
			name: "Parker"
			};
		});

			app.controller("MyNestedCtrl", function($scope) { });
		</script>
	</head>

	<body >
		<div ng-controller="MyCtrl">
			<label>Primitive</label>
			<input type="text" ng-model="name">

			<label>Object</label>
			<input type="text" ng-model="user.name">

			<div class="nested" ng-controller="MyNestedCtrl">
				<label>Primitive</label>
				<input type="text" ng-model="name">

				<label>Primitive with explicit $parent reference</label>
				<input type="text" ng-model="$parent.name">
				<label>Object</label>
				<input type="text" ng-model="user.name">
			</div>
		</div>

Publicités