@@ -1214,14 +1214,16 @@ Nonostante questa guida spieghi i *cosa*, *come* e *perché*, trovo che sia di a
1214
1214
},
1215
1215
link: linkFunc,
1216
1216
controller : ExampleController,
1217
- controllerAs: ' vm'
1217
+ controllerAs: ' vm' ,
1218
+ bindToController: true // because the scope is isolated
1218
1219
};
1219
1220
return directive;
1220
1221
1221
1222
function linkFunc (scope , el , attr , ctrl ) {
1222
- console .log (' LINK: scope.max = %i' , scope .max );
1223
- console .log (' LINK: scope.vm.min = %i' , scope .vm .min );
1224
- console .log (' LINK: scope.vm.max = %i' , scope .vm .max );
1223
+ console .log (' LINK: scope.min = %s *** should be undefined' , scope .min );
1224
+ console .log (' LINK: scope.max = %s *** should be undefined' , scope .max );
1225
+ console .log (' LINK: scope.vm.min = %s' , scope .vm .min );
1226
+ console .log (' LINK: scope.vm.max = %s' , scope .vm .max );
1225
1227
}
1226
1228
}
1227
1229
@@ -1231,16 +1233,64 @@ Nonostante questa guida spieghi i *cosa*, *come* e *perché*, trovo che sia di a
1231
1233
// Iniettare $scope solo per confronto
1232
1234
var vm = this ;
1233
1235
1234
- vm .min = 3 ;
1235
- vm .max = $scope .max ;
1236
- console .log (' CTRL: $scope.max = %i' , $scope .max );
1237
- console .log (' CTRL: vm.min = %i' , vm .min );
1238
- console .log (' CTRL: vm.max = %i' , vm .max );
1236
+ vm .min = 3 ;
1237
+
1238
+ console .log (' CTRL: $scope.vm.min = %s' , $scope .vm .min );
1239
+ console .log (' CTRL: $scope.vm.max = %s' , $scope .vm .max );
1240
+ console .log (' CTRL: vm.min = %s' , vm .min );
1241
+ console .log (' CTRL: vm.max = %s' , vm .max );
1239
1242
}
1240
1243
` ` `
1241
1244
1242
1245
` ` ` html
1243
- /* example.directive.html */
1246
+ <!-- example .directive .html -->
1247
+ < div> hello world< / div>
1248
+ < div> max= {{vm .max }}< input ng- model= " vm.max" / >< / div>
1249
+ < div> min= {{vm .min }}< input ng- model= " vm.min" / >< / div>
1250
+ ` ` `
1251
+
1252
+ ###### [Stile [Y076](#stile-y076)]
1253
+
1254
+ - Usa ` bindToController = true ` quando usi la sintassi ` controller as` con una directive al fine di fare il bind tra lo scope esterno e lo scope del controller della directive.
1255
+
1256
+ *Perché?*: Rende semplice il bind tra lo scope esterno e lo scope del controller delle directive.
1257
+
1258
+ Nota: ` bindToController` è stato introdotto con Angular 1.3.0.
1259
+
1260
+ ` ` ` html
1261
+ < div my- example max= " 77" >< / div>
1262
+ ` ` `
1263
+
1264
+ ` ` ` javascript
1265
+ angular
1266
+ .module (' app' )
1267
+ .directive (' myExample' , myExample);
1268
+
1269
+ function myExample () {
1270
+ var directive = {
1271
+ restrict: ' EA' ,
1272
+ templateUrl: ' app/feature/example.directive.html' ,
1273
+ scope: {
1274
+ max: ' ='
1275
+ },
1276
+ controller: ExampleController,
1277
+ controllerAs: ' vm' ,
1278
+ bindToController: true
1279
+ };
1280
+
1281
+ return directive;
1282
+ }
1283
+
1284
+ function ExampleController () {
1285
+ var vm = this ;
1286
+ vm .min = 3 ;
1287
+ console .log (' CTRL: vm.min = %s' , vm .min );
1288
+ console .log (' CTRL: vm.max = %s' , vm .max );
1289
+ }
1290
+ ` ` `
1291
+
1292
+ ` ` ` html
1293
+ <!-- example .directive .html -->
1244
1294
< div> hello world< / div>
1245
1295
< div> max= {{vm .max }}< input ng- model= " vm.max" / >< / div>
1246
1296
< div> min= {{vm .min }}< input ng- model= " vm.min" / >< / div>
0 commit comments