Angular 怎么在页面渲染的时候就传参并调用函数

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1732 天前的主题，其中的信息可能已经有所发展或是发生改变。

第一次在论坛发帖，不太会表达问题这里是 html 代码

<section id="content" ng-controller="indexCtrl" ng-init="a=$!userID">
<a href="#" ng-click = "playMusic(music,a)"><i class="icon-control-play i-2x"></i></a>
</section>

下面是 angularJS 部分，可以看到 fetchMusicList(userID)方法是页面打开的时候就运行的，我就是想问问，这个 userID 有什么办法传给 fetchMusicList(userID)。

var app = angular.module('music', []);
app.controller('indexCtrl', function ($http, $scope) {
    $scope.userArtist = {};
    $scope.fetchMusicList = function (userID) {
        alert(userID);
        $http.get('sys/user/musiclist').success(function (data) {
            $scope.musics = data;
        });
        $http.get('sys/user/recommendlist').success(function (data) {
            $scope.mus = data;
            console.log(userID);
        });
    };
    $scope.playMusic = function (userArtist, userID) {
        alert("使用者 id"+userID);
        userArtist.userID = userID;
        alert(userArtist.id);
        userArtist.musicId = userArtist.id;
        $http.post('sys/user/playMusic/', userArtist).success(function (result) {
            if ("succ" == result) alert("succ!")
            else alert("fail!")
        });
    };
	//这里以为 ng-init 会直接把 a 给 js 脚本,但是不行。
    $scope.fetchMusicList(a);

});

7 条回复 • 2020-03-04 09:06:24 +08:00

sunbuhui

2020-03-03 17:23:10 +08:00 via iPhone

顶一顶

noobma

2020-03-03 18:32:36 +08:00

后端渲染的时候，放模版里面

yimity

2020-03-03 18:38:47 +08:00

ng-init="user=$!userID"
app.controller('indexCtrl', function ($http, $scope) {
$scope.user = null;
$scope.userArtist = {};
$scope.fetchMusicList = function (userID) {

或者增加一个
ng-init="setUser($!userID)"
$scope.user = null;
$scope.setUser = (user) => { $scope.user = user; };

sunbuhui

2020-03-03 18:46:59 +08:00 via iPhone

@noobma 谢谢啦！

sunbuhui

2020-03-03 18:47:15 +08:00 via iPhone

@yimity 万分感谢！感谢抽出时间

sunbuhui

2020-03-03 19:44:23 +08:00

@yimity
```
var app = angular.module('music', []);
app.controller('indexCtrl', function ($http, $scope) {
$scope.userArtist = {};
$scope.user = null;
$scope.fetchMusicList = function (userID) {
alert($scope.user)
$http.get('sys/user/musiclist').success(function (data) {
$scope.musics = data;
});
$http.get('sys/user/recommendlist').success(function (data) {
$scope.mus = data;
});
};
$scope.playMusic = function (userArtist, userID) {
alert($scope.user);
userArtist.userID = userID;
alert(userArtist.id);
userArtist.musicId = userArtist.id;
$http.post('sys/user/playMusic/', userArtist).success(function (result) {
if ("succ" == result) alert("succ!")
else alert("fail!")
});
};
$scope.fetchMusicList($scope.user);

});
```
<section id="content" ng-controller="indexCtrl" ng-init="user=$!userID">

前辈打扰了，按照你的方法修改了代码，但是每次页面重新渲染的时候弹窗提醒还是 null，不过$scope.user 的确是 userID 了。

yimity

2020-03-04 09:06:24 +08:00

@sunbuhui 重新渲染是什么意思？如果是路由导航进来然后再导航出去，再进来，这种的，你把 user 绑定到更高层级，甚至 rootScope 上。如果是刷新的话，那和第一次进来是一样的啊。