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

我正在用Angular JS构建一个单页应用程序。这是我的档案

index.html

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

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文件，因此滑块无法工作。有办法解决这个问题吗？

将

移动到index.html，并在dishtemplate.html的末尾/底部添加以下脚本

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

$（'.bxslider'）.bxslider（）；

$（document）.ready（function（）{}）

不应与Angular一起使用

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

在dishestemplate.html中

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

<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.module（'yourAngularApp'，[]）
.directive（'mySlider'，function（）{
返回{
限制：“A”，
模板：“滑块的HTML”，
链接：函数（范围、元素、属性）{
element.bxSlider（）；//在这里调用插件！
}
};
});

在您的上述描述中，我没有看到硬编码或ng repeat要求，即使存在ng repeat，这种方法也与之无关，而且工作正常。您能否提供有关您实际需求的更多详细信息，以帮助我提供更合适的解决方案。当我使用ng repeat但不调用bxslider时，滑块

中的所有数据都被正确检索。当我按您建议的方式调用滑块时，它只显示第二个条目。我在想到底发生了什么。我非常感谢你的反馈。首先，如果我硬编码

中的所有数据，当我调用滑块时，所有数据条目都会正确显示。我做了一些小的更改（因为html很长，所以改为templateUrl），它工作得很好。谢谢你救了我的命：））

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!
          }
      };
});