Question

我在angularjs web应用程序的模态页面中使用scrollspy功能。我遵循这个jsfiddle。我无法将javascript code放在angularjs app中。

我在点击功能上打开模态，如下所示，

   /**   PRODUCT IS CLICKED IN PRODUCT FINDER   **/
    $scope.viewProductSummaryModal = function(FixRateDet) {

        var modalInstance = $uibModal.open({
            templateUrl: 'assets/views/loanCalculator/modals/product-finder-modal-view.html',
            controller: function ($scope, $uibModalInstance) {

                $scope.cancel = function () {
                    $uibModalInstance.dismiss('cancel');
                };
            },

            scope : $scope,
            windowClass: 'view-product-finder-window'

        });
    };

html代码如下，

<div class="modal-body no-padding-top no-padding-left no-padding-right padding-30" >
        <div class="row">
            <section>
                <!--<div class="bs-docs-example">-->
                <div>
                    <div class="col-sm-3">
                        <div></div>
                        <div>
                            <label class="mainLable">Home Package Plus 1 Year Fixed SPECIAL</label>
                        </div>
                        <div>
                            <button style="background: #54478E; border-radius: 2px; color: #fff2f2; height: 35px;width: 139px;">Add to favourite</button>
                        </div>
                        <div id="navbarExample1" class="col-sm-3 navbar navbar-static" style="position:relative !important;">
                            <div class="navbar-inner">
                                <div class="container" style="width: auto;">
                                    <a class="brand" href="#">Project Name</a>
                                    <ul class="nav">
                                        <li><a href="#section1" ng-click="$event.stopPropagation()">Section 1</a></li>
                                        <li><a href="#section2" ng-click="$event.stopPropagation()">Section 2</a></li>
                                        <li><a href="#section3" ng-click="$event.stopPropagation()">Section 3</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-9 scrollspy-example" data-spy="scroll" data-target="#navbarExample1" data-offset="0">
                        <div id="section1" style="height: 435px; width: 100%; background: #F5F1F8; border-radius: 3px;">
                            <h1>Section 1</h1>
                            <p>Try to scroll this page and look at the navigation list while scrolling!</p>
                        </div>
                        <div id="section2" style="height: 435px; width: 100%; background: #F5F1F8; border-radius: 3px;">
                            <h1>Section 1</h1>
                            <p>Try to scroll this page and look at the navigation list while scrolling!</p>
                        </div>
                        <div id="section3" style="height: 435px; width: 100%; background: #F5F1F8; border-radius: 3px;">
                            <h1>Section 1</h1>
                            <p>Try to scroll this page and look at the navigation list while scrolling!</p>
                        </div>
                    </div>
                </div>
            </section>
        </div>
</div>

我应该把这个教程的javascript代码放在angularjs应用程序中。

 $('[data-spy="scroll"]').each(function () {
        var $spy = $(this).scrollspy('refresh')
        })
    $('#navbarExample1').scrollspy();

修改如何使用custom指令来应用这个javascript？

Answer 1

你应该将这些代码放入角度运行方法中。确保在角度之前加载JQuery。

angular.module('app').run(function(){
  //put your code here
});

Answer 2

由于您希望scrollSpy在模型内部工作，因此将此代码放在modalInstance的控制器函数中

var modalInstance = $uibModal.open({
    templateUrl: 'assets/views/loanCalculator/modals/product-finder-modal-view.html',
    controller: function ($scope, $uibModalInstance) {
        //here <<<<<<<<<<<<<<<<<
        $('[data-spy="scroll"]').each(function () {
           var $spy = $(this).scrollspy('refresh')
        })
        $('#navbarExample1').scrollspy();

        $scope.cancel = function () {
           $uibModalInstance.dismiss('cancel');
        };
    },
    scope : $scope,
    windowClass: 'view-product-finder-window'
});

如何在angularjs应用程序中使用javascript代码来实现scrollspy功能

2 个答案: