setting scope to null blocks 2 way binding angular directive

Question

I have created a directive and I believe that two-way bind is being broken when I set a bound scope variable (textStyleOriginal) to null. What is a good way to resolve this issue?

.directive('textStylePalette', function($log, toastr, _){
        return {
            restrict: 'E',
            templateUrl: 'app/palettes/text/text-style-palette.html',
            scope: {
                textStyleOriginal: '=textStyle'
            },
            link: textPaletteLinkFn
        };

        function textPaletteLinkFn(scope, elem, attr) {
            scope._ = _;
            scope.textStyle = null;

            // Used when closing the palette
            scope.deselectStyle = function() {
                // I BELIEVE THE PROBLEM IS THE NEXT LINE
                scope.textStyleOriginal = null;
                scope.textStyle = null;
            };

   ...
            // THIS WATCH STOPS WORKING.
            scope.$watch('textStyleOriginal', function(newVal, oldVal){
                $log.debug('n: ' + newVal + '|o: ' + oldVal );
                debugger;
                if (newVal && newVal !== oldVal) {
                    ...
                }
            });
}

The html where the binding is initially connected is as follows:

<text-style-palette ng-show="selectedStyle !== null" text-style="selectedStyle">
</text-style-palette>

Iamisti · Accepted Answer · 2016-01-04 22:09:38Z

1

I think I know what's the problem.

Since you have an isolated scope, you'll have the textStyleOriginal set from the parent scope. It means that if you override it with the value null, then you'll loose the reference to the original object. E.g. even when you modify your textStyleOriginal in your parent scope, it won't take any effect in your directive, since you lost the reference to it already.

answered Jan 4, 2016 at 22:09

Iamisti

1,71015 silver badges30 bronze badges

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

2 Comments

ThinkBonobo Over a year ago

Thanks @limisti. You're right it was that. Luckily I quickly found a way to resolve it soon after I posted. Thanks!

Iamisti Over a year ago

please accept my answer then :) I'm glad to help you.

ThinkBonobo · Accepted Answer · 2016-01-04 22:06:53Z

A few minutes after I asked the question I tried something that seemed to work. Leaving this question up to document my answer:

It was basically the simple, 'always make passed scope variables as part of an object'.

I made some changes so that the external selectedStyle that was feeding the directives was part of an object. here's the code

<cm-text-style-palette ng-show="selections.selectedStyle !== null" text-style="selections.selectedStyle">
</cm-text-style-palette>

Notice that it's selections.selectedStyle not just selectedStyle.

The issue has to do with how variable pointing works. For more details this video might help: https://egghead.io/lessons/angularjs-the-dot#/tab-transcript

Best of luck with your projects!

Collectives™ on Stack Overflow

setting scope to null blocks 2 way binding angular directive

2 Answers 2

2 Comments

Comments

Your Answer

Collectives™ on Stack Overflow

setting scope to null blocks 2 way binding angular directive

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related