Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div ng-controller="MainCtrl">
    <h2>MainCtl</h2>
    showIt: {{showIt}}
    
    <h2>A directive</h2>
    
    <a-directive show-it="showIt"></a-directive>
​
  </div>
</body>
</html>
 
(function(angular) {
  "use strict";
  
  var app = angular.module("app", []);
  
  app.controller('MainCtrl', [
    "$scope", 
    function(
     $scope
    ) {
      $scope.showIt = true;
    }
  ]);
  
  app.directive('aDirective', ["$compile",
    function(  $compile
    ) {
      return {
        restrict: 'E',
        template: "",
        link: function(scope, element, attrs) {
          var content = scope.showIt ? '<inner-directive attr-directive="hello"></inner-directive>'
                                     : '<inner-directive ></inner-directive>';
          element.append($compile(content)(scope));
        }
      };
    }
  ]);
  
  app.directive('innerDirective', [
      "$compile",
    function(
      $compile
    ) {
      return {
        restrict: 'E',
        template: "<div>showIt: {{showIt}}</div>",
        link: function(scope, element, attrs) {
        }
      };
    }
  ]);
  
  app.directive('attrDirective', [
    function(
    ) {
      return {
        restrict: 'A',
        //template: "<div>attr directive here!</div>",
        link: function(scope, element, attrs) {
          attrs.$observe('attrDirective', function(value){
            element.append(value);
          });  
        }
      };
    }
  ]);
})(angular);
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers