scope() bug

angular.element(widget).scope() not working properly.

by lukebayes

HTML

<script src="http://code.angularjs.org/1.0.0rc8/angular-1.0.0rc8.js"></script>

<div ng:controller="Main">
    <foo id="foo" direction="vertical" count="23">
        <h1>Direction: {{direction}}</h1>
        <h1>Funky Direction: {{funkyDirection}}</h1>
        <h1>Attrs Direction: {{attrsDirection}}</h1>
        <h1>Count: {{count}}</h1>
    </foo>
</div>

JavaScript

function Main($scope) {
}

angular.module('components', []).
    directive('foo', function() {
        return {
            restrict: 'E',
            replace: true,
            scope: true,
            link: function(scope, element, attrs) {
                // This is how we're watching values, apparently inappropriately...
                // Works great for attributes that do not return a string value.
                scope.$watch(attrs.count, function(newValue, oldValue) {
                    console.log('count', newValue, oldValue, 'typeof ', typeof(newValue));
                    scope.count = newValue;
                });

                // Then we tried to access an attribute with a string value.
                scope.$watch(attrs.direction, function(newValue, oldValue) {
                    console.log('direction', newValue, oldValue, 'typeof ', typeof(newValue));
                    scope.direction = newValue;
                });
                
                // Uncomment to see what's really happening.
                // scope.vertical = 'This is the evaluated vertical expression.'
              
                // We can do something like this:
                // But I assume that's quite a bit more expensive both to initialize
                // and evaluate over time, is that true?
                scope.attrs = attrs;
                scope.$watch('attrs.direction', function(newValue, oldValue) {
                    console.log('scope.attrs.direction', newValue, oldValue, 'typeof ', typeof(newValue));
                    scope.attrsDirection = newValue;
                });
                
                // Of course, wrapping the string-value-attributes in a function accessor works,
                // but that feels kind of stinky and exceptional.
                scope.$watch(function() {return attrs.direction;}, function(newValue, oldValue) {
                    console.log('funky direction', newValue, oldValue, 'typeof ', typeof(newValue));
  ...