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>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
​
<body>
  <div ng-app="myapp">
    <div ng-controller="Controller">
      <my-customer info="naomi"></my-customer>
      <br/>
      <my-customer2 info="{{legor}}"></my-customer2>
    </div>
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script>
    (function(angular) {
      'use strict';
      angular.module('myapp', [])
        .controller('Controller', ['$scope',
          function($scope) {
            $scope.naomi = {
              name: 'Naomi',
              address: '1600 Amphitheatre'
            };
            $scope.legor = {
              name: 'legor',
              address: '123 Somewhere'
            };
          }
        ]).directive('myCustomer', function() {
          return {
            restrict: 'E',
            scope: {
              customerInfo: "=info"
            },
            template: 'Name: {{customerInfo.name}} Address: {{customerInfo.address}}'
          };
        }).directive('myCustomer2', function($rootScope,$parse,$compile,$interval, $timeout) {
          return {
            restrict: 'E',
            scope: {},
            template: '<div>Name2: {{customerInfo.name}} Address: {{customerInfo.address}}</div>',
            controller: ['$scope',
              function($scope) {
                $scope.customerInfo = {
                  name: 'newbie',
                  address: 'fancy home'
                };
              }
            ],
            link: function(s, el, a) {
              s.$watch(function(){
                return $(el).attr('info');
              },function(newV){
                 console.log(newV);
                 if(newV.indexOf('{{')>-1){
                   console.log(newV.substring(2,newV.length-2));
                   console.log(s.$eval(newV.substring(2,newV.length-2)));
                   //NO way
                 }
                else{
                  //here is okay but still need $timeout...
                  var v2=JSON.parse(newV);
                  s.customerInfo=v2;
                }
              });
              
              a.$observe("info", function(v) {
                var obj = JSON.parse(v);
                s.customerInfo = obj;
              });
              
             $interval(function(){$(el).attr('info');},2000)
             
             window.setTimeout(function() {
                document.querySelectorAll("my-customer")[0].setAttribute("info", "legor");
                document.querySelectorAll("my-customer2")[0].setAttribute("info", "{}");           
              }, 3000);
              
             window.setTimeout(function() {
                console.log(2);
                document.querySelectorAll("my-customer")[0].setAttribute("info", "legor");
                document.querySelectorAll("my-customer2")[0].setAttribute("info", "{\"name\":\"newbie2\",\"address\":\"newbie2's home\"}");          
              }, 5000);
            }
          };
        });
      
      
    })(window.angular);
  </script>
</body>
​
</html>
Output

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

Dismiss x
public
Bin info
pwang2pro
0viewers