Parent and Child Directives

by lotyu

HTML

<div ng-app="chuchi" ng-controller="testCtrl as vm">
    <parent button-caption="{{vm.buttonCaption}}"></parent> 
</div>

JavaScript

var app = angular.module('chuchi', []);
app.controller("testCtrl", function($scope) {
    
    $scope.vm.buttonCaption = "Click to call child function";
});
app.directive('parent', function() {
    return {
        restrict: 'E',
        scope: {
			buttonCaption: '@'
        },
		bindToController : true,
        controllerAs : 'vm',
		template: "<button ng-click='vm.twoWayObject.childFunc()'>{{vm.buttonCaption}}</button><child two-way-obj='vm.twoWayObject'></child>",
		controller: function($scope) {  
			var vm = this;		
			vm.twoWayObject = {};
        },
		
        link: function() {             
        }	
    }
});

app.directive('child', function() {
    return {
        restrict: 'E',
        scope: {
            twoWayObj: '='
        },
		bindToController : true,
        controllerAs : 'vm',
        template: "<h1>Chuchi</h1>",             
        link: function() {             
        },
        controller: function($scope){
        	var vm = this;
			vm.twoWayObj.childFunc = function(){
				alert('child function called');
			}
        }
    }
});