<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.4.0-beta.5" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
</head>
<body ng-app="demo" ng-controller="demoController">
<div>
<pass-variable ng-model="name"></pass-variable>
</div>
<br />
<div>
Second directive textbox: <input type="text" ng-model="name" pass-variable="" />
</div>
<br />
<div>
Main textbox: <input type="text" ng-model="name" />
</div>
</body>
</html>
angular.module("demo", []);
angular.module("demo").controller("demoController", function ($scope) {
$scope.name = "John";
});
angular.module("demo").controller("directiveController", function ($scope) {
$scope.name = "John Doe";
});
angular.module("demo").directive("passVariable", function () {
return {
restrict: 'AEC',
require: "ngModel",
templateUrl: "content.html",
link: function (scope, element, attr, ngModel) {
scope.$watch(function () {
return ngModel.$modelValue;
},
function (modelValue) {
console.log(modelValue);
});
}
}
});
/* Styles go here */
<div ng-controller="directiveController">
Content Textbox: <input type="text" ng-model="name"/>
</div>