如何在指令中获取并运行值“ {{aaa}} / {{bbb}}”的属性？

我想用angular定义一个自定义指令。它可以基于一些自定义属性来计算路径。

HTML代码：

<div ng-controller="Ctrl">
  <input ng-model="ratio" />
  <hr/>
  Image:
  <span retina-src="{{server}}/{{originWidth}}x{{originHeight}}{{uri}}" 
        origin-width="111" origin-height="222" />
</div>

Angularjs代码：

angular.module('myapp', []).
controller('Ctrl', ['$scope',
    function Ctrl($scope) {
        $scope.ratio = 1;
        $scope.server = "http://some.com";
        $scope.uri = "/main.jpg";
        $scope.name = "abc";
    }
]).
directive('retinaSrc', ['$compile',
    function($compile) {
        return {
            restrict: 'A',
            scope: {
                originWidth: '@originWidth',
                originHeight: '@originHeight'
            },
            compile: function compile(tElement, tAttrs, transclude) {
                var realPath = tAttrs.retinaSrc;
                return {
                    post: function postLink(scope, iElement, iAttrs, controller) {
                        scope.$parent.$watch("ratio", function(o, v) {
                          scope.originWidth = scope.originWidth * scope.ratio;
                          scope.originHeight = scope.originHeight * scope.ratio;

                            console.log("realPath: " + realPath);

                            // !!! there is something wrong here
                            var value = $compile(realPath)(scope);
                            console.log(value);

                            iElement.text(value);
                        });

                    }
                };


            }
        };
    }
]);

您可以看到我的文本retina-src为：

{{server}}/{{originWidth}}x{{originHeight}}{{uri}}

但是我不知道如何评估。我$compile在代码中尝试过，但是它不起作用，而是报告一些错误：

Error: [jqLite:nosel] http://errors.angularjs.org/1.2.14/jqLite/nosel
    at Error (native)

我也试过了scope.$eval(realPath)，但是会报告其他错误。

现场演示：http : //jsbin.com/mufokegayuqa/3/edit