Question

164

Passing variable from controller scope to directive

rated 0 times [ 169] [ 5] / answers: 1 / hits: 26430 / 11 Years ago, fri, july 12, 2013, 12:00:00

In my controller I've defined $scope.worker which is a plain JS object:

{

    name: 'Peter',

    phone: 601002003

}

I've created a directive:

.directive('phoneType', [function () {

    return {

        restrict: 'A',

        link: function (scope, element, attrs) {

            console.log(attrs);

        }

    };

}])

and my HTML looks like this:

<span phone-type=worker.phone></span>

How do I pass worker.phone (in this example 601002003) from the controller scope to the directive, so I can create my logic in the link method? attrs.phoneType right now shows me worker.phone string.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jimmieo

Add To Favorites

Follow

Total Points: 515

Total Questions: 102

Total Answers: 110

Location: Kazakhstan

Member since Mon, Sep 26, 2022

2 Years ago

jimmieo questions

1 Chrome Dev Tools Elements Tab stopped working (can't right click any DOM Node and hover over Dom Node doesnt highlight anything)

Fri, Mar 4, 22, 00:00, 2 Years ago

1 React Redux toolkit: type is not assignable to type 'CaseReducer< type, { payload: any; type: string; }>

Fri, Aug 13, 21, 00:00, 3 Years ago

1 react-query getting old data

Tue, Feb 23, 21, 00:00, 3 Years ago

1 FirebaseError: Function Query.where() requires a valid third argument, but it was undefined

Mon, Mar 11, 19, 00:00, 5 Years ago

1 How to make < tr> clickable as a link instead of cell?

Thu, Jan 31, 19, 00:00, 5 Years ago

View All

answered 11 Years ago sabinal · Accepted Answer

You could also pass the value to the directive via two way binding:

.directive('phoneType', [function () {

    return {

        scope: {

          phoneNumber: '=phoneType'

        }

        link: function (scope, element, attrs) {

            // now do stuff with the number, you can access it through the scope

            scope.phoneNumber // contains the number

        }

    };

}])

Now you can access the number directly through the isolate scope.
Template would look like this:

<span phone-type=worker.phone></span>

By the way, you don't need the restrict A. This is the default behavior.