Question

这个问题可能已经得到了回答，但我试图尽可能具体地提出这个问题。

使用找到的示例here。在基于触发按钮的不同内容下。

我有一个用<a></a>标签打开的bootstrap模式，需要从AngluarJS获取信息。该示例使用Jquery做一些魔术并传递数据。

BIG Edit 这里出现了很多代码，因为有些东西有点不对劲。我在想它是在脚本加载的时候。

在现场演示中，请尝试调试并找出var Index = button.data('Index')未定义的原因。 - 已修复 - 区分大小写

最后的问题为什么jquery在

失败了

VM155：8 Uncaught TypeError：angular.element（...）。scope（...）。logic.UpdateNews不是函数

完成它的工作，我吓坏了！

HTML：

<script src="http://www.jqueryscript.net/demo/Responsive-jQuery-News-Ticker-Plugin-with-Bootstrap-3-Bootstrap-News-Box/scripts/jquery.bootstrap.newsbox.min.js" type="text/javascript"></script>
    <div class="row">
        <div class="col-md-6 col-lg-3">
            <div class="panel panel-default">
                <div class="panel-heading"> <span class="glyphicon glyphicon-list-alt logo-inverse pull-left"></span><b> General News</b></div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-xs-12">
                            <ul class="demo1" style="overflow-y: hidden; height: 280px;" ng-model="Idk">
                                <li style="" class="news-item text-left" ng-repeat="item in News.GeneralNews"><strong>{{item.DateValue | date: "MMM dd yyyy"}}</strong>{{item.Preview}}<a class="FakeClickable" data-target="#GeneralModal" data-toggle="modal" data-Index="{{item.Index}}">Read more...</a></li>
                            </ul>
                            <div ng-if="Width>768">
                                <div ng-include="'../pages/Modals/General/GENERAL_INLINE.html?Update=Yes'"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer"> </div>
            </div>
        </div>

模态：

<div class="modal fade" id="GeneralModal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content" style="width:auto;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <div class="FixModalHeader">
                    <img style="vertical-align:middle" src="../Content/Images/Icons/favicon-32x32.png">
                    <span style="">{{NewsCast.HeaderTitle}}</span>
                </div>
            </div>
            <div class="modal-body">
                <div data-ng-include="'../pages/Modals/General/GENERAL_MODAL.html'"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
            console.log("I was here!");
            $('#GeneralModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget) // Button that triggered the modal
                var Index = button.data('Index') // Extract info from data-* attributes
                // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
                // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
                angular.element('#mycontroller').scope().logic.UpdateNews('General', Index);
                angular.element('#mycontroller').scope().$apply();
            })
        });
</script>
<script>
    function getUrlVars() {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    }
</script>

最后一次ng-include内发生了什么：

<div class="html-format">
<div ng-bind-html="NewsCast.General.Body">

</div>

我需要回答的问题：

我可以拥有jquery函数触发器，然后在AngularJs代码中更改某些内容吗？我设置模态的方式是文本和出现在它们上的东西是数据绑定到Angular对象。如果jquery可以改变我的角度值，我的所有模态都可以。
更具体的说，如果jquery可以从我的angularjs代码中调用一个函数并传入一些参数，我真的会被设置。
我会就正确的代码edikit提出建议

Answer 1

如果我理解正确，那么您可以使用服务。将服务注入带有jquery的控制器和带有数据绑定DOM的控制器。然后，如果您存储数据以及更改服务中数据的函数，您可以在两个位置更改它，并将其绑定到每个位置的$ scope。
您可以按照上述说明使用服务。
我不是Angular代码礼仪的专家，但你可以这样做。

Services
Simpler example注意：请参阅创建自定义服务。

触发show事件为bootstrap模式不起作用

1 个答案: