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 >
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <script type="text/javascript">
    var Dm = angular.module('testDirective',[]);
 
    Dm.controller('DmCtrl', function($scope) {
        $scope.name = "cliff";
        $scope.money="123";
​
    });
​
    Dm.directive('moneyWrap', function() {
 
      function link(scope, element, attrs) {
        element.find('span#original').css('color', 'red');
        //you can't find the original element in link function
        console.log(attrs.money + attrs.name);
        element.append(scope.money + '$');
        console.log(JSON.stringify(attrs, null, '\t'));
      }
   
      return {
        replace: true,
        scope: {money:'@',
                name: '@'},
        transclude: true,
        template: "<div>that's my money {{money}} <span ng-transclude></span> </div>",
        link: link
      };
    });
    </script>
  </head>
  <body ng-app="testDirective">
    <div class="wrap" ng-controller="DmCtrl">
      <h2>用来测试directive的例子</h2>
      <p money-wrap money="{{money}}" name="{{name}}"><span id="original">original content </span></p>
    </div>
  </body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers