CODEWITHSUNDEEP
angularjs
francisco.preller
francisco.preller

Reputation: 6639

AngularJS Isolate scope not being passed to directive

I have been scratching my head on this particular test for hours. I believe that the demonstrated directive should be working, yet I am getting undefined for the value being passed to the isolate scope.

Code:

html

<!doctype html>
<html ng-app="myApp">
<body>
    <a ng-href="#" class="test-scope" name="test">Console should say 'test' but gives undefined</a>
</body>
</html>

javascript

angular.module('myApp', [])
    .directive('testScope', function() {
        return {
            restrict: 'C',
            scope: {
                name: "="
            },
            link: function(scope, element, attrs) {
                console.log(scope.name);
            }
        };
    });

Here's the fiddle: http://jsfiddle.net/jPtb3/8/

Any help would be appreciated, I must be doing something wrong.

Upvotes: 0

Views: 676

Answers (2)

Chandermani
Chandermani

Reputation: 42669

You are interpreting the isolated scope constructs incorrectly.

When you say name= you are saying that there is attribute on the directive declaration html which is of same name name and whatever the attribute value is present, bind to that property name in the scope.

In this case there should be a scope property name test on the scope where directive is declared. The name property on the directive scope would point to this test property on parent (not literally)

Bottom line your directive scope name -> container scope test property.

See my plunker here http://jsfiddle.net/cmyworld/ANzUf/

Upvotes: 1

Maxim Shoustin
Maxim Shoustin

Reputation: 77930

Change = to @

angular.module('components', [])
.directive('testScope', function() {
    return {
        restrict: 'C',
       scope: {
            name: "@"
        },
        link: function(scope, element, attrs) {
            console.log(scope.name);
        }
    };
})

angular.module('myApp', ['components']);

See fixed Fiddle

@ – binds the value of parent scope property (which always a string) to the local scope.

= – binds parent scope property directly which will be evaluated before being passed in.

Upvotes: 1

Related Questions