将index.html中已加载的js应用于angularjs中SPA中的路由html页面

时间:2016-05-24 10:00:58

标签: angularjs

是否可以将index.html中加载的js应用于使用ng-view中的路径加载的新模板。

<script src="/static/core/js/custom.js"></script>

这里是我在index.html中加载的custom.js。 这是我的路由器

.when('/admin/core/user/add/', {
    templateUrl : '/static/templates/create_user.html',
    controller : 'userController',
})

所以,每当我要在index.html的ng-view中加载create_user.html时,它都无法从custom.js中获得任何效果

1 个答案:

答案 0 :(得分:0)

以下是如何挂钩ngView onload事件。首先演示:

&#13;
&#13;
angular.module('demo', ['ngRoute'], function($routeProvider) {
  $routeProvider
    .when('/one', { template: 'One template' })
    .when('/two', { template: 'Two template' })
})

.run(function($rootScope, $route) {
  $rootScope.__loaded = function() {
    window.updateView($route.current);
  };
});

// Some global script that does something to content loaded into <ng-view>
function updateView(route) {
  document.querySelector('#ng-view').insertAdjacentHTML('beforeend', `
    <div><small>Hacked from outside: ${route.originalPath}</small></div>
  `);
}
&#13;
<script src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script src="https://code.angularjs.org/1.5.5/angular-route.js"></script>

<div ng-app="demo">

  <a href="#/one">One</a>  <a href="#/two">Two</a>

  <div>
    <ng-view id="ng-view" onload="__loaded()"></ng-view>
  </div>

</div>
&#13;
&#13;
&#13;

所以我的想法是你在$rootScope(或根控制器$范围,无关紧要)上指定事件处理程序。然后从这个处理程序的内部,您只需调用您想要的任何全局函数。然后,该全局函数可以对ngView内容进行任何DOM操作。