JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<div ng-app="demoApp" ng-controller="mainController">
  Controller: {{testObj.name}}<br/>
  Directive: <one-way my-attribute="{{testObj}}"/>
</div>

JavaScript

angular.module('demoApp', [])
	.directive('oneWay', OneWay)
  .controller('mainController', MainController);
  

function OneWay($timeout, $parse) {
	return {
  	scope: {
    	myValue: '@myAttribute'
    },
  	template: '<input type="text" ng-model="myValue.name"/>',
    link: function(scope, element, attrs) {
    	console.log('link', scope.myValue);
      attrs.$observe('myAttribute', function(myValStr) {
      	scope.myValue = scope.$eval(myValStr);
        console.log('controller myValue obj', scope.myValue);
      });
      
      $timeout(function() {
      	console.log('change dir');
        scope.myValue.name = "directive changed";
       }, 4000);
      
      
    }
  }
}

function MainController($scope, $timeout) {
	$scope.testObj = {
  	name: 'before mod.'
  };
  
  $timeout(function() {
  	$scope.testObj.name = 'Controller modify';
  }, 2000);
  
  $timeout(function() {
  	$scope.testObj.name = '2nd Controller modify';
  }, 8000);
}