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, Oct 27 '15 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, Oct 27 '15 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, Oct 27 '15 at 22:07
What? A directive shares a scope with its parent controller if no isolate scope is created. — VSO, Oct 27 '15 at 22:09
yes, but can you assume your directive will always be inside that controller? — mentat, Oct 27 '15 at 22:10
Nope. But it is in this case and it needs the parent's $scope vars. — VSO, Oct 27 '15 at 22:10
ok, a blind google search brought this http://stackoverflow.com/questions/17900201/how-to-access-parent-scope-from-within-a-custom-directive-with-own-scope-in-an — mentat, Oct 27 '15 at 22:11

score 3 · Accepted Answer · answered Oct 27 '15 at 22:10

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 '15 at 22:10

Jesse Buitenhuis

670
4
11

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. – VSO Oct 27 '15 at 22:12
1

@VSO No problem! Must be 4 o'clock in your timezone, right? :) – Jesse Buitenhuis Oct 27 '15 at 22:13
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. – VSO Oct 27 '15 at 22:18

AngularJs - Directive Using Parent Scope Vars W/ Isolate Scope

1 Answers1