pass string variable from controller to directive angularjs

Question

I'm trying to pass a string variable from my controller, to a directive that uses isolate scope. I've managed to pass an object and a function, but can't seem to get this working!

controller:

angular.module("app").controller("myCtrl", function($scope) 
{
    //data that needs to be passed to the directive
    $scope.myParams = $scope.params; //object
    $scope.myDateOrder = $scope.dateOrder; //string
});

html:

 <div ng-controller="myCtrl">
        <my-dir params="myParams" dateOrder="myDateOrder"> 
        </my-dir>
    </div>

directive:

angular.module("app").directive("myDir", [
    function() {
        return {
            restrict: "E",
            scope: {
                checkPermissions: "&", //pulled from contact directive -> method/function
                params: "=", //passed object though from smwAddCustomerBank -> two way binding
                dateOrder: "@" //passed string value from smwAddCustomerBank -> one way binding
            },

The dateOrder is not working. If I console.log it in my controller I can see the string, if I then log this in my directive, it is undefined.

Any ideas?

Answer 1

Directive attributes need to be kebab-case, not camelCase:

<div ng-controller="myCtrl">
    ̶<̶m̶y̶-̶d̶i̶r̶ ̶p̶a̶r̶a̶m̶s̶=̶"̶m̶y̶P̶a̶r̶a̶m̶s̶"̶ ̶d̶a̶t̶e̶O̶r̶d̶e̶r̶=̶"̶m̶y̶D̶a̶t̶e̶O̶r̶d̶e̶r̶"̶>̶ ̶
    <my-dir params="myParams" date-order="myDateOrder"> 
    </my-dir>
</div>

For more information, see AngularJS Developer Guide - Directive Normalization.

---

Thank you - for anyone else that struggles with this, the full change I needed to make is: params="myParams", date-order="{{ myDateOrder }}"

To avoid using interpolation ({{ }}), use one-way binding with "<" instead of attribute binding with "&":

    scope: {
        checkPermissions: "&", //pulled from contact directive -> method/function
        params: "=", //passed object though from smwAddCustomerBank -> two way binding
        ̶d̶a̶t̶e̶O̶r̶d̶e̶r̶:̶ ̶"̶@̶"̶
        dateOrder: "<" //passed string value from smwAddCustomerBank -> one way binding
    }

Then simply do:

 <my-dir params="myParams" date-order="myDateOrder"> 

For more information, see AngularJS Comprehensive Directive API Reference - scope.