AngularJs - Directive Using Parent Scope Vars W/ Isolate Scope

Question

I don't even know what to ask at this point (edit: I have been informed that it's unclear that my question is "Why isn't the directive seeing attributes passed to it"), I thought I understood it. Can't seem to use parent controller's properties inside the directive (yes, they do need to be optional, but I don't think that's the issue).

I thought I create an isolate scope: scope: {myVar: "=?"} then simply create a myVar attribute and point it to "source" on parent controller. What am I doing wrong?

Fiddle: http://jsfiddle.net/x0mukxdd/

html:

<my-directive isDisabledDirectiveVar = "isDisabledOuterVar" insideDirectiveTestString = "someTestString" />

js:

var app = angular.module("myApp", []);
app.controller("myController", function ($scope) {
    $scope.isDisabledOuterVar = true;
    $scope.someTestString = 'blahblah I am a astring';
});

app.directive("myDirective", function () {
    return {
        restrict: 'E',
        scope: {
            isDisabledDirectiveVar: '=?',
            insideDirectiveTestString: '=?'
        },
        template: '<input type = "text" ng-disabled= "isDisabledDirectiveVar"' +
            'value = "{{insideTestString}}" ></input>'
    };
});

Side note, reference article here.

If you "don't know what to ask", how do you expect people to know what to answer?? Try to ask a question here... — The Fabio
– The Fabio, Commented Oct 27, 2015 at 22:05
Are you serious? The question is clearly "Why doesn't the directive see the elements passed through it from the parent controller through attributes?" Well, at least I thought it was clear, my bad if it wasn't. — VSO
– VSO, Commented Oct 27, 2015 at 22:06
There is no such thing as the "parent controller of a directive", by definition/design, a directive cannot know about actual controllers they are working under since they can be multiple directives under different controllers in same markup. — mentat
– mentat, Commented Oct 27, 2015 at 22:07
What? A directive shares a scope with its parent controller if no isolate scope is created. — VSO
– VSO, Commented Oct 27, 2015 at 22:09
yes, but can you assume your directive will always be inside that controller? — mentat
– mentat, Commented Oct 27, 2015 at 22:10

Jesse Buitenhuis · Accepted Answer · 2015-10-27 22:10:44Z

3

Angular uses camelCase in javascript but converts this from dash-case in HTML.

html: <my-directive is-disabled-directive-var="yourVar" />

javascript: scope: { isDisabledDirectiveVar: '=?' }

Updated example: http://jsfiddle.net/x0mukxdd/2/

answered Oct 27, 2015 at 22:10

Jesse Buitenhuis

6704 silver badges11 bronze badges

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

3 Comments

VSO Over a year ago

Thank you very, very much. I have read at least 5 articles on this, and I don't remember seeing this once. I definitely feel like an idiot now.

Jesse Buitenhuis Over a year ago

@VSO No problem! Must be 4 o'clock in your timezone, right? :)

VSO Over a year ago

6:20, sitting here figuring this out after work lol, thank you again. Edit: All the examples I looked at used a one-word attribute / scope var name. I am laughing at myself pretty badly right now.

Collectives™ on Stack Overflow

AngularJs - Directive Using Parent Scope Vars W/ Isolate Scope

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related