AngularJS - injection area (without $) in the controller

Question

In the Material Design documentation for mdDialog , Ive noticed that they walked the area (unsigned with a dollar prefix) to DialogController at the bottom.

 (function(angular, undefined){ "use strict"; angular .module('demoApp', ['ngMaterial']) .controller('AppCtrl', AppController); function AppController($scope, $mdDialog) { var alert; $scope.showAlert = showAlert; $scope.showDialog = showDialog; $scope.items = [1, 2, 3]; // Internal method function showAlert() { alert = $mdDialog.alert({ title: 'Attention', content: 'This is an example of how easy dialogs can be!', ok: 'Close' }); $mdDialog .show( alert ) .finally(function() { alert = undefined; }); } function showDialog($event) { var parentEl = angular.element(document.body); $mdDialog.show({ parent: parentEl, targetEvent: $event, template: '<md-dialog aria-label="List dialog">' + ' <md-dialog-content>'+ ' <md-list>'+ ' <md-list-item ng-repeat="item in items">'+ ' <p>Number {{item}}</p>' + ' '+ ' </md-list-item></md-list>'+ ' </md-dialog-content>' + ' <div class="md-actions">' + ' <md-button ng-click="closeDialog()" class="md-primary">' + ' Close Dialog' + ' </md-button>' + ' </div>' + '</md-dialog>', locals: { items: $scope.items }, controller: DialogController }); function DialogController(scope, $mdDialog, items) { scope.items = items; scope.closeDialog = function() { $mdDialog.hide(); } } } })(angular); 

I read that $ is a naming convention and a good way to make sure variables are not overwritten. Why does this code not comply with this convention? In this context, how do we know when to use $ or not, and what is the meaning? I believe that in this case it should be more than just a naming convention, or the authors would prefer to use $scope for consistency purposes.

NOTE. I know the difference between $scope and scope when binding functions, where scope points to a fixed set of parameters. I don't think that is why scope used in this context, but feel free to let me know if I am wrong.

Thanks!

Answer 1

I think the documents are incompatible here - although correct at the same time.

scope and $scope here will be the same, but I understood this only after reading the source code. The culprit line is inside InterimElement , where locals expand to options , which in turn have a scope property.

  return showDone = compilePromise.then(function(compileData) { angular.extend(compileData.locals, self.options); element = compileData.link(options.scope); 

I am sure that the presence of $scope , available as scope , occurs only on an incident basis and to maintain cleanliness, you should use $scope to indicate the value provided by $injector , for example, in controllers.

I sent a transfer request to fix the inconsistency and compile a pen demonstrating usage .

Answer 2

This is not a failure compared to the agreement, not even a failure in the fragment that you received in order to use modal.

Using scope rather than $scope to avoid overwriting vars inside a nested function.

The choice to place scope without a dolly sign to avoid errors for which the fragment will be received.

Separating things using Controller as syntax, for example, can help clarify things.