javascript - bootstrap的模态框中无法使用angular的赋值该怎么办?
ringa_lee
ringa_lee 2017-04-10 17:01:36
[JavaScript讨论组]

在HTML中有如下的一个bootstrap模态框

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/angular.min.js"></script>
    <link href="css/ui.css" rel="stylesheet">

    <title>排班</title>
    <script src="js/crew.js"></script>
</head>
<body>
<p ng-app="crew" ng-controller="ctrlcrew" class="container">
<button ng-click="show()">打开模态框</button>
<p class="modal fade" id="crewmodal" role="dialog">
    <p class="modal-dialog">
        <p class="modal-content">
            <p class="modal-header">
                <button type="button" class="close">&times;</button>
                <h4 class="modal-title">请选择员工</h4>
            </p>
            <p class="modal-body">
                在这里添加一些文本{{worker}}
            </p>
            <p class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </p>
        </p>
        <!-- /.modal-content -->
    </p>
    <!-- /.modal -->
</p>
</p>
</body>

然后又在crew.js文件中定义了worker变量。

var appcrew=angular.module("crew",[]);
appcrew.controller("ctrlcrew",function($scope){
    $scope.worker='李明';
    $scope.show=function(){
        $("#crewmodal").modal('show');
    };
});

但是将模态框打开后并不能显示worker变量的值。

请问这是为什么?如何解决??

-----------------------------分割线-----------------------------
问题已经解决,蟹蟹各位,测试发现上面贴的这些代码运行起来是正常的,我的网页由于比较复杂把ngapp的定义范围搞错了。。

ringa_lee
ringa_lee

ringa_lee

全部回复(3)
高洛峰

代码完全没问题,你可能是控制器或者ngapp定义错误

迷茫

html里的ng-controller有吗?

迷茫
appcrew.controller('ctrlcrew',['$scope',function($scope){
    $scope.worker = '李明';
}]);

还有可能是你的js文件加载顺序错了,看下控制台。


<body ng-app="appcrew">
    <p ng-controller="ctrlcrew">
        在这里添加一些文本{{worker}}
    </p>
</body>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号