Angular JS - transcluded scope and primitives 14481610

by mrajcok

HTML

<div class="border" ng-controller="editCtrl">Controller: editCtrl
    <br/>
    <input type="text" ng-model="name" /> <a ng-click="showScope($event)">show scope</a>
{{name}}
    <br/>
    <tabs>Directive: tabs
        <br/>
        <input type="text" ng-model="name" />
        <a ng-click="showScope($event)">show scope</a>
    </tabs>
</div>

CSS

.border {
    border: 1px solid gray;
    margin: 8px;
    padding: 8px;
}

JavaScript

function editCtrl($scope) {
    $scope.name = "";
    $scope.showScope = function (ev) {
        console.log(angular.element(ev.srcElement).scope())
    }
}

var mod = angular.module('mod', []);

mod.directive('tabs', function () {
    return {
        restrict: 'E',
        transclude: true,
        template:
            '<div class="border" ng-transclude></div><a ng-click="showScope($event)">show scope</a> {{name}}',
    };
})