JSFiddle - React, Tailwind, and code Playground

by Djul

HTML

<div ng-app='myTestApp'>
  <div ng-controller="controller">
      <test-bindings test-at="{{parentAt}}" test-ampersand="parentAmpersand" test-equal="parentEqual"></test-bindings>
      <controller-scope-update></controller-scope-update>
  </div>
</div>

JavaScript

function controller($scope) {
    
    $scope.parentAt = "At";
    $scope.parentAmpersand = function(message){
        console.log('called');
        return message;
    };
    $scope.parentEqual = "Equal";
    
    $scope.updateParentVariables = function(){
        $scope.parentAt= 'parentAt';
        //$scope.parentAmpersand = 'parentAmpersand';
        $scope.parentEqual = 'parentdEqual';
    };
    
    $scope.reset = function(){
        $scope.parentAt = 'At';
        //$scope.parentAmpersand = 'Ampersand';
        $scope.parentEqual = 'Equal';
    };
}

angular.module('myTestApp', []);

angular.module('myTestApp').directive('testBindings', function(){
    return{
        template: '<p>Child scope values:</p><p>{{testAt}}</p><p>{{testAmpersand("hello")}}</p><p>{{testEqual}}</p><button ng-click="updateChildVariables()">Update Variables in child scope</button>',
        restrict: 'E',
        scope:{
            testAt: '@',
            testAmpersand: '&',
            testEqual: '='
        },
        controller: function($scope){
            $scope.updateChildVariables = function(){
                $scope.testAt = 'childAt';
                $scope.testAmpersand('childAmpersand');
                $scope.testEqual = 'childEqual';
            }
        }
    };
})
.directive('controllerScopeUpdate', function(){
    return{
        template:'<button ng-click="updateParentVariables()">Update variables in parent scope</button><p>Controller Values:</p><p>{{parentAt}}</p><p>{{parentAmpersand()}}</p><p>{{parentEqual}}</p><button ng-click="reset()">reset to original values</button>',
        restrict: 'E'
    }
});