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', [
    function(
    ) {
      return {
        restrict: 'E',
        template: "<inner-directive></inner-directive>",
        link: function(scope, element, attrs) {
​
        },
        controller: [
          '$scope',
          function(
            $scope
          ) {
​
          }
        ]
      };
    }
  ]);
  
  app.directive('innerDirective', [
      "$compile",
    function(
      $compile
    ) {
      return {
        restrict: 'E',
        template: "<div>showIt: {{showIt}}</div>",
        link: function(scope, element, attrs) {
          
          // How do I conditionally add an attribute directive?
          if (scope.showIt) {
            element.attr("attr-directive", "hello");
            $compile(element)(scope);
          }
          
        }
      };
    }
  ]);
  
  app.directive('attrDirective', [
    function(
    ) {
      return {
        restrict: 'A',
        template: "<div>attr directive here!</div>",
        link: function(scope, element, attrs) {
​
        }
      };
    }
  ]);
})(angular);
​
Output

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

Dismiss x
public
Bin info
taktranpro
0viewers