<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js
"></script>
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
<h1>Hello Plunker!</h1>
<ul>
<li ng-repeat="item in list">
<div> {{item}} - <input type="text" ng-model="item">
<save></save>
<button ng-click="edit()">Change</button>
</div>
<div>
<change ng-if='editable'></change>
</div>
</li>
</ul>
</body>
<script>
angular.module('app', [])
.controller('testCtrl', function($scope){
$scope.list = [1,2,3,4,5,6,7,8,9];
$scope.editable = false;
$scope.edit = function(){
$scope.editable = !$scope.editable;
}
})
.directive('change', function(){
return {
restrict: "E",
replace: true,
scope: {
show: '='
},
templateUrl: "other.html"
}
})
.directive('save', function(){
return {
restrict: "E",
replace: true,
template: ' <button class="btn btn-sm btn-warning" ng-click="saving(item)">SAVE</button>',
link: function(scope,element,attr){
scope.saving = function(item){
console.log(item);
console.log(scope.$parent.item)
}
}
}
})
</script>
</html>
// Code goes here
/* Styles go here */
<div class="container" show="hello">
<form class="form">
<div class="form-group">
<label>This is label</label>
<input type="text" class="form-control" ng-model="item"> <save></save>
</div>
</form>
</div>