AngularJS Custom Directives

@{
    ViewBag.Title = "Index";
}


<script src="~/Scripts/angular.js"></script>
<div ng-app="app" ng-controller="ctr">
    <temp-Home name="siv"></temp-Home>
</div>
<script type="text/javascript">
    angular.module("app", [])
    .controller("ctr", function ($scope) {
        $scope.siv = {};
        $scope.siv.FN = "Siv ";
        $scope.siv.LN = "Sankar";
    })
    .directive("tempHome", function () {
        var directive = {};
        directive.restrict = "E";
        directive.scope={
        user:"=name"
        };
        directive.template = "User : <b>{{user.FN}}</b><b>{{user.LN}}</b>";
       
        directive.link = function ($scope, element, attributes) {
            element.html("This is the new content: " +  $scope.siv.FN);
            element.css("background-color", "#ffff00");
        };

        directive.compile = function (element, attributes) {
            element.css("border", "5px solid #ABCABC");
        };

        //directive.compile = function (element, attributes) {
        //    element.css("border", "1px solid #cccccc");

        //    var linkFunction = function ($scope, element, attributes) {
        //        element.html("This is the new content: " + $scope.siv);
        //        element.css("background-color", "#ffff00");
        //    }

        //    return linkFunction;
        //}
        return directive;
    });
</script>