AngularJS Isolate scope not being passed to directive

Question

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.

changed your Fiddle, see under

Maxim Shoustin
– Maxim Shoustin

2013-10-03 04:39:34 +00:00
Commented Oct 3, 2013 at 4:39 — Maxim Shoustin
– Maxim Shoustin, Commented Oct 3, 2013 at 4:39

Maxim Shoustin · Accepted Answer · 2013-10-03 04:36:24Z

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.

see this link: amitgharat.wordpress.com/2013/06/08/…. You can find examples and description

Chandermani · Accepted Answer · 2013-10-03 04:44:26Z

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/

I don't understand. My a tag has an attribute of name="test" -- Is this not what you are telling me to do?
@francisco.preller i have added a fiddle. See what i am saying in action here jsfiddle.net/cmyworld/ANzUf

Collectives™ on Stack Overflow

AngularJS Isolate scope not being passed to directive

2 Answers 2

1 Comment

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Related