小编jia*_*ing的帖子

angularjs - 在ng-src中使用{{}}绑定但不加载ng-src

我一直试图将值绑定到img HTML元素的ng-src无济于事.

HTML代码:

<div ng-controller='footerCtrl'>
<a href="#"><img ng-src="{{avatar_url}}"/></a>
</div>
Run Code Online (Sandbox Code Playgroud)

AngularJS代码:

app.controller('footerCtrl',function($scope, userServices)
{
$scope.avatar_url='';
$scope.$on('updateAvatar', function()
{$scope.avatar_url = userServices.getAvatar_url();}
);
}

app.factory('userServices', function($rootScope){ 
var avatar_url='';
return{  setAvatar_url: function(newAvatar_url)
{ avatar_url = newAvatar_url; $rootScope.$broadcast('updateAvatar');}}
);
Run Code Online (Sandbox Code Playgroud)

我想更新avatar_url变量,ng-src每次更新用户服务中的相应变量(avatar_url).用户服务中的变量通过http.POST请求更新到服务器.我已经检查过来自服务器的响应确实更新了用户服务中的变量,然后广播到该中的avatar_url变量footerCtrl.

但是,图像元素HTML根本不反映更改.事实上,我还尝试将avatar_url变量预设为我页面中其中一张图片的相对路径,图像仍然没有显示任何内容(ng src值为空).Ť

angularjs

55
推荐指数
2
解决办法
13万
查看次数

angularJS $ broadcast和$ on

有没有办法让$ broadcast在初始化阶段将变量传播到$ on?

<div ng-app='test'>
    <div ng-controller='testCtrl'> <span>{{testContent}}</span> 
    </div>
    <div ng-controller="testCtrl2">
        <input type='text' ng-change="updateContent()" ng-model="testContent2" />
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

 

var app = angular.module('test', []);
app.factory('sharedContent', function ($rootScope) {
    var standardContent;
    var resizeProportion;
    return {
        setStandardContent: function (newStandardContent) {
            standardContent = newStandardContent;
            $rootScope.$broadcast('updateContent');
            console.log('broadcast');
        },
        getStandardContent: function () {
            return standardContent;
        },
        setResizeProportion: function (newResizeProportion) {
            $rootScope.$broadcast('updateResizeProportion');
        },
    }
});
app.run(function (sharedContent) {
    sharedContent.setStandardContent('haha');
});

function testCtrl($scope, sharedContent) {
    $scope.testContent;
    $scope.$on('updateContent', function () {
        console.log('receive');
        $scope.testContent = sharedContent.getStandardContent();
    });
}

function …
Run Code Online (Sandbox Code Playgroud)

angularjs angularjs-scope

8
推荐指数
1
解决办法
9917
查看次数

标签 统计

angularjs ×2

angularjs-scope ×1