AngularJS Playground

Experimenting with AngularJS.

by nomadev

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<div ng-app="pippo" >
    <input type="text" ng-model="model" ng-model-options="modelOptions" ng-minlength="4" test-prima />
    <div test-seconda>
    </div>
</div>

CSS

#debugText {
    margin: 10px 0;
    padding: 5px;
    background-color: #eee;
    border: 1px solid #ccc;
}

input.ng-dirty.ng-invalid {
   background-color: #f65b90;
}
}

JavaScript

'use strict';

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

var fields = {};

app.directive('testPrima', [function() {
	
  return {
  	controller: ['$scope', function($scope) {
  		$scope.model = '';
      $scope.modelOptions = {
      	updateOn: 'blur'
      }
  	}],
  	link: function($scope, $attrs, $element, $ngModel) {
    	fields[1] = $ngModel
    },
  	restrict: 'A',
    scope: true,
    require: 'ngModel'
  }
}])

app.directive('testSeconda', [function() {
	
  return {
  	controller: ['$scope', function($scope) {
  		
  	}],
  	link: function($scope, $attrs, $element) {
    	$scope.$watch(
      function(){return fields[1].$modelValue}, 
      function(val) {
      	if(! val) return;
      	$element.$$element.html('woo ' + val)
        console.log(val);
      }, true)
    },
  	restrict: 'A',
    scope: true,
  }
}])