Pass scope variable from directive to it's controller

Question

This is possibly easy, but I have browsed the different questions here on SO and in the Angular documentation and can't really find what I'm looking for.

In a directive:

function ssKendoGrid() {
    return {
        scope: {
            dataSource: "="
        },
        template: "<div kendo-grid k-options='gridOptions'></div>",
        controller: "ssKendoGridCtrl",
    }
}

That uses the controller:

function ssKendoGridCtrl($scope) {
    alert($scope.dataSource);
    //other stuff
}

If I want to access the value of dataSource I assumed I'd be able to do something like this:

<div ng-controller="myController">
    <div ss-kendo-grid data-source="test"></div>
</div>

MyController is:

function myController($scope) {
    $scope.test = "Tested";
}

But it comes as undefined when I try to alert($scope.dataSource); the value..

Now I know I can do this:

<div ss-kendo-grid="test"></div>

And access it in the directive and controller like this:

return {
    scope: {
        ssKendoGrid: "="
    },
    template: "<div kendo-grid k-options='gridOptions'></div>",
    controller: "ssKendoGridCtrl"
}

//In controller
alert($scope.ssKendoGrid);

But I would like to be able to pass in a JSON object to do various things with and this doesn't seem as clean as in the markup I'd like it to be more intuitive to look at the html and know what the dataSource is.

What I'm really looking for is an understanding of what I'm doing wrong, why doesn't this work?? I've obviously not got the right understanding of how to pass various things to the isolated scope of the directive.

SOLVED

So, turns out I was using the wrong attribute name. HTML5 recognizes data- as a valid attribute, and Angular ignores the fact that data- is prefixed on the variable, which means that I would need to access the variable this way:

HTML:

<div ss-kendo-grid data-source="test"></div>

JS:

return {
    scope: {
        dataSource: "=source"
    },
    template: "<div kendo-grid k-options='gridOptions'></div>",
    controller: "ssKendoGridCtrl"
}

Cheers

Answer 1

you need to access the directive scope variable as

<div ss-kendo-grid data-source="test"></div>

similarly as you name the directive in the HTML markup

Answer 2

So, turns out I was using the wrong attribute name. HTML5 recognizes data- as a valid attribute, and Angular ignores the fact that data- is prefixed on the variable, which means that I would need to access the variable this way:

HTML:

<div ss-kendo-grid data-source="test"></div>

JS:

return {
    scope: {
        dataSource: "=source"
    },
    template: "<div kendo-grid k-options='gridOptions'></div>",
    controller: "ssKendoGridCtrl"
}

And a better convention is to simply not use a directive with "data-" at the beginning of it.

Answer 3

invite.directive('googlePlaces', function (){
  return {
    restrict:'E',
    replace:true,
    // transclude:true,
    scope: {location:'=location'},
    template: '<input id="google_places_ac" name="google_places_ac" type="text" class="input-block-level"/>',
    link: function(scope, elm, attrs){
      var autocomplete = new google.maps.places.Autocomplete($("#google_places_ac")[0], {});
      google.maps.event.addListener(autocomplete, 'place_changed', function() {
        var place = autocomplete.getPlace();
        scope.location = place.geometry.location.lat() + ',' + place.geometry.location.lng();
        console.log(scope.location);
        scope.$apply();
        // scope.$apply(function() {
          // scope.location = location;
        // });
      });
    }
  };
});