Question

当src属性的值为空时，我为图像标记构建一个指令，然后使用默认值更改src值。

.directive('defaultImage', function($compile) {
return {
    restrict : 'A',
    compile : function compile(tElement, tAttributes) {

        return {
            pre : function preLink(scope, element, attributes) {
            },
            post : function postLink(scope, element, attrs) {
                if (attrs.src == undefined || attrs.src.length == 0) {
                    element.attr('src', '/delegate/resource/admin/images/default.png');
                    $compile(element)(scope);
                }
            }
        };
    }
}
});

用法：

<img src="{{entity.image}}" style="margin-left: 20px"
     height="120px" width="140px" default-image>

但这不起作用。

Answer 1

首先，您熟悉ng-src吗？它用于插值的src表达式，以避免浏览器尝试从"path/to/{{url}}"而不是实际的URL（例如"/path/to/image1.png"）获取。如果url为undefined，它也不会加载图片。

其次，$compile(element)(scope)完全没必要（实际上是不正确的） - 如果没有别的，你不必重新编译defaultImage指令。

修改

嗯......这是我的“过度思考”的情况......到目前为止，实现默认URL的最简单方法就是这样（不需要指令）：

<img ng-src="{{entity.image || '/default/url'}}">

或者，如果您有范围变量$scope.defaultUrl，那么：

<img ng-src="{{entity.image || defaultUrl}}">

原始答案：

所以，让我们看看ngSrc如何处理“好”的情况并为默认情况创建类似的东西。以下是ngSrc source code的简化代码片段：

link: function(scope, element, attr){ attr.$observe("ngSrc", function(value) { if (!value) { return; } attr.$set("src", value); // on IE, if "ng:src" directive declaration is used and "src" attribute doesn't exist // then calling element.setAttribute('src', 'foo') doesn't do anything, so we need // to set the property as well to achieve the desired effect. // we use attr[attrName] value since $set can sanitize the url. if (msie) element.prop("src", attr["src"]); }); }

所以，使用类似的方法：

.directive("defaultImage", function(){ return { link: function(scope, element, attr){ // what Angular uses // https://github.com/angular/angular.js/blob/v1.4.5/src/Angular.js#L191 var msie = document.documentMode; var defaultImageUrl = "/path/to/default.png"; attr.$observe("ngSrc", function(value){ if (!value){ attr.$set("src", defaultImageUrl); if (msie) element.prop("src", attr["src"]); } }) } } })

<强> Demo

更改指令angularjs中的属性值

1 个答案: