Bind scope to Directive's Controller

Question

Please consider the following angular directive:

 angular.module('map').directive('mapOptions',
    function MapOptionsDirective() {

      return {
        restrict: 'E',
        transclude: true,
        scope: {
          map: '=',
          layers: '=',
          mapId: '@'
        },
        controller: mapOptionsController,
        controllerAs: 'mapOptionsCtrl',
        bindToController: true,
        templateUrl: 'modules/map/views/mapoptions.client.view.html'
      };


      ///////////////////////////

      function mapOptionsController($scope) {
        var vm = this;
        console.log(vm);              // log #1
        console.log($scope.map)       // log #2
        console.log(vm.map);          // log #3
      }
});

Note the isolated scope, the controllerAs syntax, as well as the bindToController option set to true .

This is how my directive looks in the html:

<map-options layers="mapCtrl.layers" map="mapCtrl.map" map-id="{{mapCtrl.mapId}}">

The log outputs are:

• log #1: Logs out "constructor {}" , which i guess is ok.
• log #2: Logs out the correct object that got bound to scope.
• log #3: Logs out undefined . This is, where i expected to find the object that i have found on $scope .

I want to bind the isolated scope to the controller directly, but this does not work. Strangely, the the scope gets filled with data, but this data is bound to scope, and does not get bound to the directive directly, as I would like it to. I cannot figure out, why. I must be missing something obvious. Thanks!

Answer 1

我只需要从Angular1.2切换到Angular1.3，现在它就可以正常工作了。