AngularJS — injecting scope (without $) into a controller

Question

In the Material Design mdDialog documentation, I’ve noticed that they’ve passed a scope (without a prefixed dollar sign) to the DialogController near 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've read that $ is a naming convention and a good way to make sure variables don't get overwritten. Why is this code failing to follow that convention? I.e in this context, how do we know when to use $ or not, and what is the significance? I believe in this case it must be more than just the naming convention, or the authors would have chosen to use $scope for purposes of consistency.

NOTE: I am aware of the difference between $scope and scope in linking functions, where scope is pointing to a fixed set of parameters. I do not believe that is why scope is used in this context, but feel free to let me know if I am wrong.

Thanks!

Thats right @Freelancer. The DialogController function is a normal function and not a angular controller or angular directive controller. scope is just a name given to the argument there. It is not the injected $scope. — manasi sakhare
– manasi sakhare, Commented May 8, 2015 at 7:21
Thanks for the insights—Though, it is listed as a controller via $mdDialog.show({controller: DialogController}); ? — nikk wong
– nikk wong, Commented May 8, 2015 at 7:24
And, erm, if it's not a controller—what exactly is it doing? :-) Thanks. — nikk wong
– nikk wong, Commented May 8, 2015 at 7:32

miensol · Accepted Answer · 2015-05-13 06:35:22Z

5

+50

I think the docs are inconsistent here - while being correct at the same time.

The scope and $scope here will be the same, but I only figured that out after reading the source code. The culprit line is inside InterimElement where locals are extended by 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'm pretty sure that having $scope accessible as scope is only by incident and to keep things clean one should use $scope to refer to value provided by $injector like i.e. in controllers.

I've submitted a pull request to fix the inconsistency and compiled a pen demonstrating the usage.

answered May 13, 2015 at 6:35

miensol

41.9k9 gold badges127 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nikk wong Over a year ago

You rock. Thanks a bunch! Was having tons of trouble wrapping my head around that one.

Mateus AJ Leon · Accepted Answer · 2015-05-18 05:06:55Z

0

This isn't a failure over the convention, not even a failure on the snippet you got to use the modal.

The use of scope, and not $scope, it's to avoid overwrite vars inside the nested function.

The choice to place the scope without a dolar sign its to avoid errors for whom that will get the snippet.

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

answered May 18, 2015 at 5:06

Mateus AJ Leon

1,4041 gold badge15 silver badges23 bronze badges

Collectives™ on Stack Overflow

AngularJS — injecting scope (without $) into a controller

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related