Angular: Widget Directives II

by mmansion

HTML

<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.min.js"></script>
<script type="text/ng-template" id="MyWidget.html">
    <p>Name = {{name}}</p>    
</script>

<div ng-controller="CtrlA">
    <my-widget></my-widget>
</div>
<hr>
<div ng-controller="CtrlB">
    <my-widget my-attr="parentModelA"></my-widget>
</div>
<hr>
<div ng-controller="CtrlB">
    <my-widget my-attr="parentModelA"></my-widget>
    <my-widget my-attr="parentModelB"></my-widget>
</div>

JavaScript

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

myApp.directive('myWidget', function(){
    return {
        restrict: 'E',
        replace: true,
        scope: { 
            localModel:'=myAttr' 
        },
        templateUrl: 'MyWidget.html',
        link: function(scope, elem, attrs) {
            
            $(elem).onclick = function() {
                 alert("Hi");   
            }
            scope.name  = scope.localModel;
        }
    }
});

function CtrlA( $scope )
{
   $scope.parentModelA = "test";
}

function CtrlB($scope) {
    
  $scope.name = "B Team";   
}