JSFiddle - React, Tailwind, and code Playground

by why520crazy

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<fieldset ng-controller="simple">
    <legend>例子</legend>
    <p>First name: <input ng-model="firstName" /></p>
    <p>Last name: <input ng-model="lastName"  /></p>
    <p>Hello,    <input w5c-computed="fullName"></p>
    <div>{{firstName +" | "+ lastName }}</div>
    <p>nick name: <input ng-model="nick.name"  /></p>
    <p>{{nick.name}}</p>
</fieldset>

JavaScript

function simple($scope){
  $scope.firstName = "why";
  $scope.lastName = "520crazy";
  
  $scope.fullName = {
      get:function(){
          $scope.firstName + " " + $scope.lastName;
      },
      set:function(value){
          var array = (value || "").split(" ");
          $scope.firstName = array[0] || "";
          $scope.lastName = array[1] || "";
      }
  }
   
  var isEmpty = function(value){
    return (value === null || value === undefined || value === "");
  };
  
  $scope.$watch("[firstName1,lastName1]",function(newValue){
   
    var returnValue = "";
    if(!isEmpty(newValue[0])){
      returnValue = newValue[0];
    }
    if(!isEmpty(newValue[1])){
      returnValue = returnValue +　" " + newValue[1];
    }
    if(!isEmpty(returnValue))
    {
      $scope.fullName = returnValue;
    }
  },true);
  
}

angular.module("ng").directive("w5cComputed",['$parse', function ($parse) {
    return{
        link: function (scope, element, attr) {
            var w5cComputed = scope.$eval(scope.w5cComputed);
            alert(w5cComputed.get);
            scope.$watch(w5cComputed.get,function(newValue){
                alert(newValue);
                //element.val(newValue)
            })
        }
    };
}]);