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

2020-03-03 16:49:52 +08:00
 sunbuhui

第一次在论坛发帖,不太会表达问题 这里是 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);

});
1463 次点击
所在节点    程序员
7 条回复
sunbuhui
2020-03-03 17:23:10 +08:00
顶一顶
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
@noobma 谢谢啦!
sunbuhui
2020-03-03 18:47:15 +08:00
@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 上。如果是刷新的话,那和第一次进来是一样的啊。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/649476

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX