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?

georgeawg · Accepted Answer · 2018-11-27 15:39:31Z

3

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.

edited Nov 27, 2018 at 15:39

answered Nov 23, 2018 at 18:33

georgeawg

49k13 gold badges78 silver badges98 bronze badges

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

1 Comment

Janey Over a year ago

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

Collectives™ on Stack Overflow

pass string variable from controller to directive angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related