Question

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

HTML code：

<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

Answer 1

您需要使用$ interpolate服务来替换卷曲表达式：即{{originWidth}}。

示例：

var url = $interpolate(iAttrs.retinaSrc)(scope.$parent);

注意：范围。$ parent是必需的，因为您的指令具有隔离范围。请记住将$ interpolate服务注入指令函数。

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

1 个答案: