angularjs controller

by merganser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="_APPNAME_" ng-controller="_CONTROLLERNAME_">
 
	<h2>_APPNAME_</h2>
<hello-world name="Citizen" warning="something here {{name}}"></hello-world>
	
	<input type="text" ng-model="value" />
	

	<p>
		<button ng-click="save()">Save</button>
		<button ng-click="clear()">Clear</button>
	</p>

	<p>Saved Value: <span ng-bind="savedValueFunction()"></span></p>

</div>

JavaScript

var app = angular.module("_APPNAME_", []); 
	app.controller("_CONTROLLERNAME_", function($scope) {
		$scope.name = "Merganser";
		
		$scope.value = "";
		$scope.savedValue = "";
		
		$scope.savedValueFunction = function() {
			return $scope.savedValue;
		};
		$scope.clear = function() {
			$scope.value = "";
      $scope.savedValue="";
		};
		$scope.save = function() {
			alert("Saved");
      $scope.savedValue=$scope.value;
		};
	});
  
  
  
app.directive('helloWorld', function() {
    return {
        restrict: 'E',
        scope: {
            name: '@',
            warning: '@'
        },
        controller: function ($scope) {
            $scope.myFunc = function (input) {
                return "Hello there, " + input + "!";
            }
        },
        template: '<span>{{myFunc(name)}}</span><br><h1>{{warning}}</h1>',
    }
});