Question

我有一个简单的指令，一个提交按钮，在提交按钮时应该显示一个加载图标。什么样的加载图标取决于属性。

问题是，$ compile完全忽略了angular.element('<img ng-src="http://i.imgur.com/{{attrs.icon}}.gif" width="16" height="16">')

但我不明白为什么。最终结果是：

<img width="16" height="16" class="ng-scope">

我错过了什么？

我的代码：

ppSubmit.$inject = ['$compile'];
function ppSubmit($compile) {
  return {
    replace: true,
    transclude: true,
    scope: {
      submitted: '=',
      text: '@'
    },
    template: '<button class="btn" type="submit" ng-transclude></button>',
    link: function(scope, element, attrs) {
      if (attrs.type) {
        element.addClass('btn-' + attrs.type);
      }

      var oldText = element.text(),
          // attrs.icon is just a placeholder to demonstrate the issue
          // and will alter be replaced with "attrs.type"
          preloader = $compile(angular.element('<img ng-src="http://i.imgur.com/{{attrs.icon}}.gif" width="16" height="16">'))(scope);

      console.log(attrs.icon);
      console.log(preloader);
      scope.$watch('submitted', function(submitted) {
        element.html(preloader.html() + ' <span>' + (submitted === true ? scope.text : oldText) + '</span>');
      });
    }
  };
}

我提出plunker。

Answer 1

你过于复杂了。您想要添加图片 - 只需在模板中执行此操作并切换显示的内容ng-if（或ng-show，如果有意义的话）

template: '<button ng-if="!submitted" \
                   class="btn" type="submit" ng-transclude></button> \
           <span ng-if="submitted"> \
             <img ng-src="http://i.imgur.com/{{attrs.icon}}.gif" width="16" height="16"> \
             <span>{{text}}</span> \
           </span>'

<强>附录

但更具体到您的问题。你正确地编译了<img ng-src="...">，这本来有用，但是你刚才做了.html()，它取了HTML-as-string。此HTML字符串不保留可能已应用的指令的任何属性（如ng-src）

在带有动态属性值的Directive中使用$ compile

1 个答案: