我尝试使用指令加载脚本，但它不起作用，我有一个应用程序，它应该在部分 View 中显示图表(仪表)，尝试将脚本粘贴到部分 View 中，但没有用，即使指令也没有不工作。 但是，如果页面正常加载，则其工作正常，当其用作部分时，其不显示任何图表(与脚本相关的内容)
有什么简单的例子可以在 angularjs 的部分 View 中加载脚本吗？
index.html
<!DOCTYPE html>
<html>
<head>
<!-- CSS (load bootstrap) -->
<link rel="stylesheet" href="bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- JS (load angular, ui-router, and our custom js file) -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script src="angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="routerApp">
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
<ul class="nav navbar-nav">
<li><a ui-sref="home">Customer Details</a></li>
<li><a ui-sref="about">Job Details</a></li>
</ul>
</nav>
<!-- MAIN CONTENT -->
<div class="container">
<div ui-view></div>
</div>
</body>
</html>
app.js
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
// HOME STATES AND NESTED VIEWS
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
.state('home.list', {
url: '/list',
templateUrl: 'partial-home-list.html',
controller: function($scope) {
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
})
//JOB Section Navigations
.state('job', {
url: '/jobdetails',
templateUrl: 'jobdetails.html'
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS
.state('about', {
url: '/about',
views: {
'': { templateUrl: 'partial-about.html' },
'columnOne@about': { template: 'Look I am a column!' },
'columnTwo@about': {
templateUrl: 'table-data.html',
controller: 'scotchController'
}
}
});
});
routerApp.controller('scotchController', function($scope) {
$scope.message = 'test';
$scope.scotches = [
{
name: 'Macallan 12',
price: 50
},
{
name: 'Chivas Regal Royal Salute',
price: 10000
},
{
name: 'Glenfiddich 1937',
price: 20000
}
];
});
routerApp.directive('jsSidebar' , function() {
return {
link: function(scope, element, attrs) {
alert('testing');
}
}
});
partial-home.html
<div > Home partial page </div>
<a ui-sref="job"> Click to Display Chart </a>
<div ui-view></div>
工作详情.html
<script >
//Chart library is mentioned which is over 2000lines
</script>
<!-- here chart supposed to be rendered-->
<div id="id_of_chart"></div>
<div jsSidebar >Testing purpose</div>
最佳答案
ng-view 不会加载模板内的脚本。
检查这个.. https://stackoverflow.com/a/18220411/4578788了解更多详情。
关于javascript - Angularjs - javascript 未加载到部分 View 内，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28694371/