首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

设置$rootScope,但不会反映在ng-src中

在AngularJS中,$rootScope是一个全局作用域对象,它是所有其他作用域的父作用域。通过设置$rootScope,我们可以在整个应用程序中共享数据和方法。

然而,当我们在ng-src中使用$rootScope中的变量时,可能会遇到不会反映变化的问题。这是因为ng-src指令在页面加载时会立即解析其表达式,并将其结果作为图片的src属性。而$rootScope中的变量在加载页面时可能还没有被初始化或者更新。

为了解决这个问题,我们可以使用$watch监听$rootScope中的变量,并在变量发生变化时更新ng-src的值。具体步骤如下:

  1. 在控制器中注入$rootScope,并设置需要共享的变量。例如:
代码语言:javascript
复制
app.controller('MyController', function($rootScope) {
  $rootScope.imageUrl = 'path/to/image.jpg';
});
  1. 在HTML模板中使用ng-src指令,并通过$watch监听$rootScope中的变量:
代码语言:html
复制
<img ng-src="{{ imageUrl }}">
代码语言:javascript
复制
app.controller('MyController', function($rootScope, $scope) {
  $rootScope.$watch('imageUrl', function(newValue, oldValue) {
    if (newValue !== oldValue) {
      $scope.imageUrl = newValue;
    }
  });
});

这样,当$rootScope中的imageUrl变量发生变化时,$watch函数会被触发,将新的值赋给$scope中的imageUrl变量,从而更新ng-src的值。

关于$rootScope的更多信息,你可以参考腾讯云的AngularJS开发文档:AngularJS开发文档

请注意,以上答案仅供参考,具体实现方式可能因项目需求和版本差异而有所不同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

angular常用内置指令

先不要管咬文嚼字,用起来倒是易懂, ng-init 该指令被调用时会初始化内部作用域。 这个指令一般会出现在比较小的应用,比如给个demo什么的......ng-app rootScope。 声明了ng-app的元素会成为rootScope的起点,而rootScope是作用域链的根,通常声明在你懂的。 也就是说根下的作用域都可以访问它。...rootScope上......ng-if 如果ng-if的表达式为false,则对应的元素整个会从DOM移除而非隐藏,审查元素时你可以看到表达式变成注释了。 如果相进行隐藏,可以使用ng-hide。...其实这样href和ng-href看不出什么区别 ng-src 大同小异,即表达式生效前不要加载该资源。 ng-class 用作用域中的对象动态改变类样式

19410
  • angularjs学习第七天笔记(系统指令学习)

    您好,接着在昨天对简单指令学习了解以后,今天开始学习了解angularjs的系统指令   系统指令大部分都是以ng开始,这也是为什么在自定义指令命名时不要以ng开始的原因所在   系统指令在学习了分成两个部分进行学习...href对应,其好处是当为给其赋值时     ng-src指令:与html的src对应,表达式生效之前不要加载图像:      一个简单的练习: <!...1、ng-app:DOM元素将被标记为$rootScope的起始点          在JavaScript代码通过run方法来访问$rootScope。        ...当元素是遍历的后一个时值为true     $even:当$index值是偶数时值为true     $odd:当$index值是奇数时值为true     ng-repeat在数据列表显示中用的比较多,在实际使用可以根据其关键字进行样式设置展示...}; });   7、{{}}与ng-bind指令:两个指令都是实现数据绑定    区别:由于{{}}绑定数据时,会因为加载后未渲染属性而导致浏览器闪烁,ng-bind不会闪烁

    2.9K10

    angularjs学习第七天笔记(系统指令学习)

    您好,接着在昨天对简单指令学习了解以后,今天开始学习了解angularjs的系统指令   系统指令大部分都是以ng开始,这也是为什么在自定义指令命名时不要以ng开始的原因所在   系统指令在学习了分成两个部分进行学习...href对应,其好处是当为给其赋值时     ng-src指令:与html的src对应,表达式生效之前不要加载图像:      一个简单的练习: <!...1、ng-app:DOM元素将被标记为$rootScope的起始点          在JavaScript代码通过run方法来访问$rootScope。        ...当元素是遍历的后一个时值为true     $even:当$index值是偶数时值为true     $odd:当$index值是奇数时值为true     ng-repeat在数据列表显示中用的比较多,在实际使用可以根据其关键字进行样式设置展示...}; });   7、{{}}与ng-bind指令:两个指令都是实现数据绑定    区别:由于{{}}绑定数据时,会因为加载后未渲染属性而导致浏览器闪烁,ng-bind不会闪烁

    2.6K30

    angularjs 控制器、作用域、广播详解

    一、控制器 首先列出几种我们平常使用控制器时的几种误区: 我们知道angualrJs中一个控制器时可以对应不同的视图模板的,这种实现方式存在的问题是: 如果视图1和视图2根本没有任何逻辑关系,这样“控制器...”的角色就会很尴尬,因为我们不可能把不同业务的数据模型都绑在同一个控制器。...正确的方式应该是这样的:我们把公共的方法抽离出来,放在公共的服务当中去,需要的时候从公共的服务调取就好了。...;(因为在 controller里面操作DOM会导致浏览器页面的重绘,这种代价是昂贵的) 3.一般不要在控制器里面做数据过滤操作,ng有$filter服务; 一般来说,Controller是不会相互调用的...格式如下:$on(event,data) 上述说明,eventName是需要广播的事件的名称,args传递的数据集合,$on 方法的参数event是事件的相关对象,data是事件传播的数据。

    1.9K51

    在AngularJS应用实现认证授权

    在AngularJS应用实现认证授权 在每一个严肃的应用,认证和授权都是非常重要的一个部分。单页应用也不例外。应用并不会将所有的数据和功能都 暴露给所有的用户。...在这里为了简单起见,我们只是将它放在他用一个服务。这个服务可以被一个用于处理登录功能的控制器所用。 安全路由 我们需要在应用设置一些安全路由。...由于事件是在$rootScope层级上,最好在run函数绑定事件处理器。...app.run(["$rootScope", "$location", function($rootScope, $location) { $rootScope....由于一个factory只会被调用一次,我们需要在一个初始化函数设置这个变量,代码如下所示: function init() { if ($window.sessionStorage

    2.1K70

    2、Angular JS 学习笔记 – 双向数据绑定和Scope概念

    首先,模板通过浏览器编译, 这个编译步骤生成一个实时视图.对该视图所做的任何更改会立即反映在模型,在模型的任何更改都会传播到视图....一个子作用域继承父作用域的属性,一个隔离作用户则不会继承;查看隔离作用域的更多信息; 作用域为表达式求值提供上下文。...控制器和指令都有作用域的引用,并不是彼此引用。这项安排就从指令(就是DOM)隔离了控制器。...在这个例子,这是与Controller相同的作用域;(我们后面将讨论作用域的层级关系) 上一步取到作用域为执行环境,计算greeting表达式的值,并且计算结果设置到到dom元素; 你可以认为作用域和它的属性里的数据用于渲染这个视图...', function($scope, $rootScope) { $scope.name = 'World'; $rootScope.department = 'Angular'; } ])

    13.2K20

    达观数据对AngularJS技术的思考与实践

    $rootScope是由angularJS加载模块的时候自动创建的,每个模块只会有1个rootScoperootScope创建好会以服务的形式加入到 $injector。...也就是说通过 $injector.get("$ rootScope ");能够获取到某个模块的根作用域。更准确的来说,$rootScope是由angularJS的核心模块ng创建的。...AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML的ng-model)来设置数据绑定。 在HTML: ? 在JS: ?...$apply()(也可以用$watch来监控model变化),它会自动触发$rootScope.$digest(),从而让watchers被触发用以更新view。...1)作用域的原型继承:原型继承时对变量的赋值不会修改原型的值,而是直接在当前scope创建一个同名的属性;如果是变量是对象,则不会创建。即基本类型会重新创建变量,引用则不会。 ?

    5.4K150

    前端面试题angular_Vue前端面试题

    这样会导致,在 ng-if 中用基本变量绑定 ng-model,并在外层 div 把此 model 绑定给另一个显示区域,内层改变时,外层不会同步改变,因为此时已经是两个变量了。...可以用来 优化 Angular 应用的性能 的办法: 减少监控项(比如对不会变化的数据采用单向绑定) 主动设置索引(指定 track by,简单类型默认用自身当索引,对象默认使用 $$hashKey...通俗的说rootScrope 页面所有scope的父亲 如何产生rootScope和scope吧。 step1:Angular解析ng-app然后在内存创建rootScope。...scope@,=,&有什么区别? restrict可以分别设置: A匹配属性 E匹配标签 C匹配class M 匹配注释 当然你可以设置多个值比如AEC,进行多个匹配。...在scope,@,=,&在进行值绑定时分别表示 @获取一个设置的字符串,它可以自己设置的也可以使用{ {yourModel}}进行绑定的; = 双向绑定,绑定scope上的一些属性; &用于执行父级

    14.1K20

    AngularJs之Scope作用域

    在 HTML 代码,一旦一个 ng-app 指令被定义,那么一个作用域就产生了,由 ng-app 所生成的作用域比较特殊,它是一个根作用域($rootScope),它是其他所有$Scope 的最顶层。...以下 HTML 定义了三个作用域,分别是由 ng-app 指令所创建的$rootScope,parentCtrl 和 childCtrl 所创建的子作用域,这其中 childCtrl 生成的作用域又是...在 AngularJS ,作用域原型链的顶端是$rootScope,AnguarJS 将会寻找到$rootScope 为止,如果还是找不到,则会返回 undefined。   ...args 属性,但是因为 childCtrl 的作用域继承自 parentCtrl 的作用域,因此,AngularJS 会找到父作用域中的 args 属性并设置到输入框。...我们还注意到 link 函数对 isolates 进行了修改,但是最终不会在运行结果中体现。

    1.6K30

    【Hybrid开发高级系列】AngularJS(二)——常用$服务

    rootScope是由angularJS加载模块的时候自动创建的,每个模块只会有1个rootScoperootScope创建好会以服务的形式加入到 injector。...rootscope是各个controllerscope的桥梁。用rootscope定义的值,可以在各个controller中使用。...cache: 布尔类型或者缓存对象,设置之后angular会缓存get请求。     timeout: 数值,延迟请求     responseType:字符串,响应类型。...传递给then方法的响应对象包括以下几个属性     data: 转换之后的响应体     status: http响应状态码     headers: 头信息     config: 生成原始请求的设置对象...        当浏览器的URL改变时,不会重新加载整个页面。

    42140

    走进AngularJs(二) ng模板中常用指令的使用方式

    在框架内部,字符串不会简单的使用eval()来执行,而是有一个专门的$parse服务来处理。...既然已经存在了,我们不妨往合理的方向上想一想,或许ng的设计者压根就不想让模板成为单纯的视图层,本来就是想增强HTML,让它有一点业务能力。...这么想的话似乎也能想通,好吧,先欺骗一下自己吧~ 五、特殊的ng-src和ng-href   在说明这两个指令的特殊之前,需要先了解一下ng的启动及执行过程,如下图:   1) 浏览器加载静态HTML...指令,这样在路径被正确得到之前就不会显示找不到图片。...学英语有两种方法,一种是先做题,遇到不会的单词再查,另一种是先拿着单词本背。尽管专家好像更推荐前者,如果你现在一窍不通,还是老老实实先背单词吧~

    2.9K20

    JSON Web Token(JWT)教程:一个基于Laravel和AngularJS的例子

    Reserved claims 这些claim是JWT预先定义的,在JWT不会强制使用它们,而是推荐使用。...服务器使用在用户浏览器上设置的cookie进行响应,并包含用于标识用户的会话ID。 在每个后续请求,由于用户数据存储在服务器上,服务器需要找到该会话并对其进行反序列化。...(您可以在这里找到整个演示文稿,以及此GitHub存储库的源代码,以便您可以遵循本教程。) 该JSON Web Token示例不会使用任何类型的加密来确保在claims传送的信息的机密性。...例如: 'secret' => env('JWT_SECRET') 我们可以在Github上找到关于这个软件包和所有配置设置的更多信息。...还有很多关于JWT的内容,例如如何处理安全细节,以及在token过期时刷新令牌,上述示例应演示使用JSON Web Token的基本用法,更重要的是显示优势。

    30.6K10

    【Redis版】spring boot高性能实现二维码扫码登录()

    那么如果用户长时间不扫二维码,服务器的线程将不会被唤醒,微信是怎么做到高性能的。如果有园友知道,可以给我留言。 3.我的实现方式 好了,我这里选用支付宝的实现方式。因为简单粗暴,还高效。...3.前端每隔1秒发起一次请求,从Redis获取认证信息,如果没有认证信息则返回waiting状态,如果查询到认证信息,则将认证信息写入seesion。...SpringApplication.run(App.class, args); } } App.java resources/application.properties 配置使用...[CDATA[*/ var app = angular.module('app', []); app.controller('MainController', function($rootScope...href="http://www.cnblogs.com/GoodHelper/">from 刘冬的博客 <img ng-show="src" ng-src

    76220

    angularjs中常用的ng指令介绍【转载】

    在框架内部,字符串不会简单的使用eval()来执行,而是有一个专门的$parse服务来处理。...既然已经存在了,我们不妨往合理的方向上想一想,或许ng的设计者压根就不想让模板成为单纯的视图层,本来就是想增强HTML,让它有一点业务能力。...这么想的话似乎也能想通,好吧,先欺骗一下自己吧~ 五、特殊的ng-src和ng-href 在说明这两个指令的特殊之前,需要先了解一下ng的启动及执行过程,如下图: 1) 浏览器加载静态HTML文件并解析为...指令,这样在路径被正确得到之前就不会显示找不到图片。...同理,标签的href属性也需要换成ng-href,这样页面上就不会先出现一个地址错误的链接。

    1.9K30
    领券