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="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>
<body ng-app="test" ng-controller="main">
    <isolate-scope img="https://www.google.com/images/srpr/logo11w.png" fn="mainDimensions"></isolate-scope>
    <inherited-scope img="https://www.google.com/images/srpr/logo11w.png"></inherited-scope>
    <same-scope img="https://www.google.com/images/srpr/logo11w.png"></same-scope>
​
    <table ng-show="keys(scopes).length">
        <thead>
            <th>Source</th>
            <th>Dimensions</th>
        </thead>
        <tr ng-repeat="(name, dimensions) in scopes">
            <td>{{ name }}</td>
            <td>{{ dimensions.width }} x {{ dimensions.height }}</td>
        </tr>
    </table>
</body>
<script id="imageTemplate" type="text/ng-template">
    <div class="directive">
        <span ng-show="width && height">{{ width }} x {{ height }}</span>
        <img style="display:block" ng-src="{{ imgSrc }}" />
    </div>
</script>
</html>
 
angular.module('test', [])
    .controller('main', function($scope, $timeout) {
        $scope.keys = Object.keys;
        $scope.scopes = {};
        $scope.mainDimensions = function(img, name) {
            $scope.scopes[name] = {
                width  : img.width,
                height : img.height
            };
        };
        $timeout(function() {
            $scope.$apply();
        });
    })
    .directive('isolateScope', function() {
        return {
            scope: {
                mainFn: '&fn' // If the method name on the parent scope ever changes, we just need to update the fn attribute in the html.
            },
            templateUrl: 'imageTemplate',
            link: function(scope, elem, attrs) {
                scope.imgSrc = attrs.img;
                elem.find('img').on('load', function() {
                    scope.width = this.width;
                    scope.height = this.height;
                    scope.mainFn()(this, 'isolate'); // Note that we are calling scope.mainFn and then running what it returns. When using the & designation, you just have a getter function that returns the original method. Once we get that, we can use it normally.
                });
            }
        };
    })
    .directive('inheritedScope', function() {
        return {
            scope: true,
            templateUrl: 'imageTemplate',
            link: function(scope, elem, attrs) {
                scope.imgSrc = attrs.img;
                elem.find('img').on('load', function() {
                    scope.width = this.width;
                    scope.height = this.height;
                    scope.mainDimensions(this, 'inherited'); // Since it's inherited, we can just call it as though it were on this scope. Obviously this creates a coupling between the directive and the parent scope.
                });
            }
        };
    })
    .directive('sameScope', function() {
        return {
            templateUrl: 'imageTemplate',
            link: function(scope, elem, attrs) {
                scope.imgSrc = attrs.img;
                elem.find('img').on('load', function() {
                    scope.width = this.width;
                    scope.height = this.height;
                    scope.mainDimensions(this, 'same'); // We didn't create a new scope, so we just call it like normal. This also creates a coupling.
                });
            }
        };
    });
Output 300px

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

Dismiss x
public
Bin info
soydeedopro
0viewers