Angular - 如何在 ng-view 中调用 javascript 函数

Question

我正在使用 Angular JS 构建单页应用程序。这是我的文件

index.html

<script src="js/dishesapp.js"></script>
<div ng-view></div>

dishestemplate.html

<script src="js/bxslider.js"></script>  (which is for my image slider)

bxslider.js 有一些功能并且

$(document).ready(function ()
{
    $('.bxslider').bxSlider();
});

dishesapp.js

var dishesApp = angular.module('dishesApp', ['ngRoute']);
        dishesApp.config(function ($routeProvider) {
            $routeProvider
                    .when('/', {templateUrl: 'partials/default.html'})
                    .when('/Noodles', {templateUrl: 'partials/dishtemplate.html', controller: 'NoodlesCtrl'})
                    .when('/Rolls', {templateUrl: 'partials/dishtemplate.html', controller: 'RollsCtrl'})
                    .when('/Pancakes', {templateUrl: 'partials/dishtemplate.html', controller: 'PancakesCtrl'})
                    .when('/Rice', {templateUrl: 'partials/dishtemplate.html', controller: 'RiceCtrl'})
                    .when('/FamilyStyle', {templateUrl: 'partials/dishtemplate.html', controller: 'FamilyStyleCtrl'})
                    .when('/Others', {templateUrl: 'partials/dishtemplate.html', controller: 'OthersCtrl'})
                    .otherwise({redirectTo: '/'});
    });

index.html 成功加载所有局部视图。但是 template.html 无法加载 javascript 文件，因此滑块不起作用。有没有办法解决这个问题？

Answer 1

将 <script src="js/bxslider.js"></script> 移动到 index.html 并在 dishtemplate.html

的 end/bottom 添加以下脚本

<script>
    $('.bxslider').bxSlider();
</script>

Answer 2

$(document).ready(function (){}) 不应与 Angular.

一起使用

您需要的是 directive。为你的滑块创建一个指令并在你的 dishestemplate.html 文件上使用。在指令中，您调用 jQuery 插件。

在dishestemplate.html

<div my-slider></div>

你的指令

angular.module('yourAngularApp', [])
    .directive('mySlider', function() {
      return {
          restrict: 'A',
          template: '<div class="slider">The HTML for your slider</div>',
          link: function (scope, element, attrs) {
              element.bxSlider(); //call your plugin here!
          }
      };
});

Angular - 如何在 ng-view 中调用 javascript 函数

Angular - how to call javascript function inside ng-view

javascript

angularjs

url-routing

ng-view