JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="myApp" ng-controller="MyCtrl as vm">
<input class="form-control" ng-model="person.name">
<input class="form-control" ng-model="person.surname">
<input class="form-control" ng-model="person.address">
<input class="form-control" ng-model="person.city">
<br>
<button ng-click="loadlater()">Load later</button>
<pre>{{person|json}}</pre>
<pre>{{console|json}}</pre>
</div>
JavaScript
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {
var vm = this;
$scope.loadlater = function() {
$scope.person = {
name: 'Stefano',
surname: 'Rossi',
address: 'Orange Road',
city: {
clazz: 'foo.bar.City',
id: 5,
lazy: true
}
}
}
}]);
myApp.directive('ngModel', [function() {
return {
restrict: 'A',
require: ['?ngModel'],
link: function($scope, $element, attrs, controllers) {
var modelCtrl = controllers[0];
var modelPath = attrs.ngModel;
$scope.console = [];
$scope.$watch(modelPath, function(newValue, oldValue) {
var model = $scope;
// How to check the $scope here?
if ($scope[modelPath] && $scope[modelPath].lazy) {
$scope.console.push("Load in lazy...");
}
$scope.console.push(modelPath);
console.log(modelPath);
});
}
}
}]);