1

I have an element that has both a controller and a directive with an isolate scope applied to it:

scope: {
    dirVar: '='
}

The goal is to run certain parts of the directive only if a variable holds true. I'm setting that variable in the controller and trying to pass it into the directive through an attr.

The problem is that when I do something like

<div ng-controller="MyCtrl" my-directive active="ctrlVar"></div>

and try to get active in the directive with scope.active, it always comes up undefined.

Here is an example: http://jsfiddle.net/u3t2u/1/

Any explanation as to why or how to properly do this? I assume the problem is with the controller and directive being applied to the same element and wish to get around that.

Another option would be to remove the directive's isolate scope and have it evaluate an attr passed to it, but I'm not sure how to do that ($parse keeps throwing errors).

3 Answers 3

1

That is because your directive is not inside the controller. Try this:

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <div my-directive="" active="myValue">
             Testing.
        </div>
    </div>
</div>
Sign up to request clarification or add additional context in comments.

3 Comments

The problem I have with this is that I have variables specific to MyCtrl being used where "Testing." is and I lose access to those because of the directive's isolate scope (at least that seems to be the problem I run in to).
@LucasRaines That should not be the case. The isolate scope is a child of the scope created for MyCtrl. See jsfiddle.net/4aeTY
Yes, I realize the difference is that in my initial jsfiddle I made the mistake of including a transclude and template, which isn't the case in the actual version. If you remove the transclude, you also remove access to the parent scope. Meaning I could do $parent.otherValue, but that is less than ideal.
1

Ended up changing the way I structured the directive because it wasn't something that should really have had an isolate scope, and the only reason it did was so it could take expressions and evaluate them to true or false.

So I changed it to use $parse, which left the directive looking something like:

var active = $parse(attrs.isActive);

// Evaluate contents of attrs.isActive
// as if they are variables within its scope,
// which is inherited from parent scopes
if(active(scope)) {
    // do something
}

2 Comments

Interesting, thanks for sharing. I've been using isolated scopes, I think, in all directives I wrote (assumed more isolation is always good), but now I started doubting this approach. Did you opt out of isolated scope because the directive in question isn't reused anywhere else?
It's used in a lot of places, but if the directive doesn't have any variables specific to itself (in this case mine didn't), there isn't much reason to have an isolate scope. Isolate scope causes the directive to become more complicated (for example, must use ng-transclude if you wish to include other html/inherit from parent scope). I'm making an infinite scroller directive, which doesn't need any directive specific vars. Other times just setting scope to true is all you need.
0

I am not too familiar with certain things like transclude and creating an isolated scope, but this is what I got after reading the docs for Directives and fiddling around:

http://jsfiddle.net/u3t2u/4/

I only changed this portion of the html:

<div ng-controller="MyCtrl">
    <div my-directive active="myValue">
    Testing.
    </div>
</div>

I believe that in this case, you do not actually have to pass a value to the my-directive directive, since you are already using an isolate scope with an =. Sorry if my explanation is not that good. You can read more at http://docs.angularjs.org/guide/directive , under the section Writing directives (long version).

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.