V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
sunbuhui
V2EX  ›  程序员

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

  •  
  •   sunbuhui · 2020-03-03 16:49:52 +08:00 · 1457 次点击
    这是一个创建于 1745 天前的主题,其中的信息可能已经有所发展或是发生改变。

    第一次在论坛发帖,不太会表达问题 这里是 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
        1
    sunbuhui  
    OP
       2020-03-03 17:23:10 +08:00 via iPhone
    顶一顶
    noobma
        2
    noobma  
       2020-03-03 18:32:36 +08:00
    后端渲染的时候,放模版里面
    yimity
        3
    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
        4
    sunbuhui  
    OP
       2020-03-03 18:46:59 +08:00 via iPhone
    @noobma 谢谢啦!
    sunbuhui
        5
    sunbuhui  
    OP
       2020-03-03 18:47:15 +08:00 via iPhone
    @yimity 万分感谢!感谢抽出时间
    sunbuhui
        6
    sunbuhui  
    OP
       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
        7
    yimity  
       2020-03-04 09:06:24 +08:00
    @sunbuhui 重新渲染是什么意思?如果是路由导航进来然后再导航出去,再进来,这种的,你把 user 绑定到更高层级,甚至 rootScope 上。如果是刷新的话,那和第一次进来是一样的啊。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   864 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 21:38 · PVG 05:38 · LAX 13:38 · JFK 16:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.