JSFiddle - React, Tailwind, and code Playground

by mrajcok

HTML

<hr>
    Questions:
<ul>
    <li>1) Why can't I referecne scope.bindValue in my link function?  Is there a way I can compute a value from scope.bindValue and set it to scope?</li>
    <li>2) Why can the subdirective bind using "@" in scope:{} but not use scope.value = attrs.value in the link function?</li>
</ul>
<hr>
Code:
    <br/><br/>

<directive bind-value="12" value="7"></directive>

JavaScript

var myApp = angular.module('myApp', []);

var commonTemplate = '<div>{{name}} bind-value is: {{bindValue}} </div><div>{{name}} value is: {{value}} </div><div>{{name}} add one to bind-value is: {{addOneBindValue}} </div><div>{{name}} add one to value is: {{addOneValue}} </div><br/>';
    
myApp.directive('directive', function () {
    return {
        scope: {
            bindValue: "@",
        },
        //passing scope.value for both bind-value and value of sub-directive illustrating sub-directive's behavior diverges irrespective of how this directive retrieves and passes them
        template: commonTemplate + '<br/><sub-directive bind-value="{{value}}" value="{{value}}"></sub-directive>',
        restrict: 'E',
        link: function (scope, element, attrs) {
            scope.name = "Directive";
            scope.value = attrs.value;
            scope.addOneValue = parseInt(scope.value) + 1;
            scope.$watch('bindValue', function(newVal) {
                scope.addOneBindValue = parseInt(newVal) + 1;
            });
        }
    };
});


myApp.directive('subDirective', function () {
    return {
        scope: {
            bindValue: "@",
            value: "@"
        },
        template: commonTemplate,
        restrict: 'E',
        link: function (scope, element, attrs) {   
            scope.name = "SubDirective";
            attrs.$observe('value', function(newVal) {
                scope.addOneValue = parseInt(newVal) + 1;
            });
            scope.$watch('bindValue', function(newVal) {
                scope.addOneBindValue = parseInt(newVal) + 1;
            });
        }
    };
});