Javascript AngularJS使用多个模板视图加载脚本文件

我正在使用angulasJS构建网页。我在同一个html页面（blog.html）上使用了两个不同的模板（articlesView.html、singleArticleView.html）和一个js文件，当它在模板（singleArticleView.html）中找到X元素的位置时，会触发一个事件。 我有两个恼人的问题：

1） 我的X元素的位置会根据获取的内容而变化，但是我的js函数仍然停留在模板加载的第一个DOM结构上。因此，第二次事件是在上次元素所在的相同位置触发的，但当前元素中没有。我必须完全刷新，以便函数能够获得元素的正确坐标。这意味着我不能使用data ng href在视图之间切换

2） 第二个问题是脚本文件是在一个子模板（singleArticleView.html）中调用的，如果我切换到另一个没有脚本引用的子模板，js文件仍然可以工作。如果我使用锚元素在它们之间移动，就会发生这种情况。因此，同样地，我必须完全刷新以避免这种行为

我非常感谢任何建议或替代方法

定义路线的角度模块的代码为：

(function () {
var app = angular.module("dbayonaCode", ["ngRoute"]);
app.config(function ($routeProvider) {

    $routeProvider
    .when("/", {
        templateUrl: "Templates/articlesView.html",
        controller: "articlesController"
    });       


 $routeProvider
 .when("/article/:id", {
     templateUrl: "Templates/singleArticleView.html",
     controller: "singleArticleController"
 });

    $routeProvider.otherwise({ redirectTo: "/" });

});


}());

articlesController.js

(function () {

var app = angular.module("dbayonaCode");


var articlesController = function ($scope, dataService) {


    $scope.data = dataService;
    $scope.isBusy = true;


    if (dataService.isReady() === false) {
        dataService.getArticlesShortDescription()
        .then(function (data) {
            angular.copy(data, dataService.articles);

        }, function () {
            alert("could not load articles");
        })

        .then(function () {

            $scope.isBusy = false;
        });

    }

}

app.controller("articlesController", articlesController);

}());

      (function () {

                var app = angular.module("dbayonaCode");


                var singleArticleController = function ($scope, dataService, $window, $routeParams, $sce) {

                   $scope.article = {};
                    $scope.newComment = {};

                    //Get the article with its comments to show in the template and add a new comment
                    //It uses ArticlesController.cs
                    dataService.getArticleById($routeParams.id)
                     .then(function (data) {
                         //success
                         $scope.article = data;
                         $scope.myContent = $sce.trustAsHtml(data.body);

                     },

                     function () {
                         //error
                         $windows.location = "#/";

                     });                    


                }
                app.controller("singleArticleController", singleArticleController);
            }());

singleArticleController.js

(function () {

var app = angular.module("dbayonaCode");


var articlesController = function ($scope, dataService) {


    $scope.data = dataService;
    $scope.isBusy = true;


    if (dataService.isReady() === false) {
        dataService.getArticlesShortDescription()
        .then(function (data) {
            angular.copy(data, dataService.articles);

        }, function () {
            alert("could not load articles");
        })

        .then(function () {

            $scope.isBusy = false;
        });

    }

}

app.controller("articlesController", articlesController);

}());

      (function () {

                var app = angular.module("dbayonaCode");


                var singleArticleController = function ($scope, dataService, $window, $routeParams, $sce) {

                   $scope.article = {};
                    $scope.newComment = {};

                    //Get the article with its comments to show in the template and add a new comment
                    //It uses ArticlesController.cs
                    dataService.getArticleById($routeParams.id)
                     .then(function (data) {
                         //success
                         $scope.article = data;
                         $scope.myContent = $sce.trustAsHtml(data.body);

                     },

                     function () {
                         //error
                         $windows.location = "#/";

                     });                    


                }
                app.controller("singleArticleController", singleArticleController);
            }());

singleArticleView.html（此页面底部的两个DOM元素（我的脚本代码正在引用它们）都是我的_布局页面的一部分。当我滚动到这些元素时，我使用库路径点触发一个函数。）

{{article.dateCreated}日期：'medium'}



.............          
$（文档）.ready（函数（）{
$（“#边栏容器”）。航路点({
处理程序：函数（方向）{
如果（方向==‘向下’）{
$（“#边栏容器”）.css（'position'，'fixed'）；
$（“#边栏容器”）.css（'width'，'100%”）；
}
否则{
$（“#边栏容器”）.css（'position'，'relative'）；
$（“#边栏容器”）.css（'width'，'100%”）；
}
},
抵销：40
//偏移量：“80%”/-30英拉米塔德德尔幻灯片
}
);
$（“#区段页脚”）。航路点({
处理程序：函数（方向）{
如果（方向==‘向下’）{
$（“#边栏容器”）.css（'position'，'relative'）；
}
否则{
$（“#边栏容器”）.css（'position'，'fixed'）；
}
},
抵销：10
//偏移量：“80%”/-30英拉米塔德德尔幻灯片
}
);
});

你能发布你所说的JS代码吗？另外，您是说您正在HTML模板中的

标记中加载JS吗？为什么不在你的控制器里写代码呢？谢谢azium。这是我的密码。我已经用控制器中的代码对其进行了测试，但我得到了相同的行为。脚本代码引用的两个DOM元素都是my_布局页面的一部分。当我滚动到这些元素时，我使用库航路点触发一个函数。