Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
       <style type="text/css">
            div {
                height: 200px;
                width: 200px;
                border: 1px solid green;
            }   
        </style>
    </head>     
    <body ng-app="deeme">
        
        <div ng-controller="drep" editables></div>
    
        <script type="text/javascript">
            angular.module ("deeme", [])
            .controller("drep", function($scope){
                alert("controller run");
                $scope.bager = function (){
                    alert("before linking");
                }
            })
            .directive("editables", ["$compile", function($compile){
                return {
                    restrict: "A",
                    compile: function(element, attrs){
                        alert("compiler run");
                        element.attr("ng-mouseover", "bager()");
                    
                      /* 
                        var button = document.createElement("button");
                        button.setAttribute("ng-show", "derp");
                        button.textContent = "BUTTOR!";
                        element.append(button);
                     */
                    },
                    link: function(scope, elmt, attrs){
                        alert("linker run");
                        scope.bager = function(){
                            alert("after linking");
                        };
                        var compiled_el = $compile(elmt)(scope);
                        elmt.replaceWith(compiled_el);
                }
            }
            
            }])
        </script>
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers