angular.js - angular js中如何在一个模板页面（template）中根据引用它的页面不同加载不同的背景?

问题描述

问 题

<div class="banner">

<div class="logo">
    <a href="/">
        <img src="res/images/logo.png"/>
    </a>

</div>
<p class="title">个人中心</p>

</div>
比如这个模板页面，如果另一个页面也要应用这个页面，但是图片不同，用angular js该如何解决？

解决方案

我能想到的有如下两种解决方法

• 如果是从模板层面解决，那么把想抽象成模板的页面抽象成模板，之后使用ngInclude来包含你想动态包含的模板。

• 也可以把这个模板页面封装为一个独立的组件或指令，之后img的src通过组件或指令的属性传递进来。

随便写一个吧，手机版本，可能有错

angular.module('app', [])
  .directive('foo', function () {
    return {
      template: `
    <div class="banner">
      <div class="logo">
        <a href="/">
          <img ng-src="imgUri"/>
        </a>
      </div>
      <p class="title">个人中心</p>
    </div>`,
      scope: {
        imgUri: '@'
      }
    }
  })

这篇关于angular.js - angular js中如何在一个模板页面（template）中根据引用它的页面不同加载不同的背景?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！