Embedded Angular directives with local scope and shared model

Embedded directives with local scope and shared model

by imehesz

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<div ng-app="webApp">
    <div id="canvas" ng-controller="CanvasController">
        CanvasController <div>{{someSettings}}</div>        
        <div class="dira" ng-model="someSettings"></div>        
    </div>
</div>

JavaScript

var webApp = angular.module("webApp", []);

webApp.controller("CanvasController", function($scope){
    var defaultSettings = "settings {}"
    $scope.someSettings = defaultSettings;
});

webApp.directive("dira", function(){
    return {
        restrict: "C",
        scope: {
            someSettings: "=ngModel"
        },
        template: "directive A <input type='text' ng-model='someSettings'/><button ng-click='clicked()'>click it!</button><div class='dirb' ng-show='isTrue(true)' ng-model='someSettings'></div>",
        controller: function($scope){
            this.clicked = function(){
                alert("clicked dira controller!");
            }
        },
        link: function(scope){
            scope.clicked = function(){
                alert("clicked dira!");
            }
        }
    };
});

webApp.directive("dirb", function(){
    return {
        restrict: "C",
        scope: {
            someSettings: "=ngModel"
        },
        require: "^dira",
        template: "directive B <input type='text' ng-model='someSettings'/><button ng-click='clicked()'>click it!</button>",
        link: function(scope,el,attrs,DiraCtrl){
            scope.someLocalSettings = "aaa";

            scope.isTrue = function(bool){
                return bool;
            }
            
            scope.clicked = function(){
                DiraCtrl.clicked();
            }
        }
    }
});