首页
学习
活动
专区
工具
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开发文档

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

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

相关·内容

没有搜到相关的视频

领券