Angularjs - JavaScript的不是局部视图里面装 [英] Angularjs - javascript not loading inside partial views
本文介绍了Angularjs - JavaScript的不是局部视图里面装的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试着用指令来加载脚本，但它不工作，我有一个应用程序，它应该显示里面的部分图表（瓜哥米），试图粘贴局部视图，但没有用里面的脚本，甚至没指令'T的工作。
但是，当它作为局部使用，如果页面正常加载它的工作，它不显示任何图表（文字相关的东西）
任何简单的例子，使加载脚本angularjs的部分景色里面呢？
index.html的
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆所述;！ - CSS（负载自举） - ＆GT;
＆LT;链接rel =stylesheet属性HREF =bootstrap.min.css＆GT; ＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js＆GT;＆下; /脚本＆GT; ＆LT;！ - JS（负载角，UI的路由器，以及我们的定制js文件） - GT;
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js＆GT;＆下; /脚本＆GT; ＆LT;脚本SRC =角-UI-router.min.js＆GT;＆LT; / SCRIPT＆GT; ＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT;
＆LT; /头＆GT;＆LT;机身NG-应用=routerApp＆GT;＆LT;！ - 导航 - ＆GT;
＆LT;导航类=导航栏导航栏逆角色=导航＆GT; ＆LT; UL类=NAV导航栏，导航＆GT;
＆LT;立GT;＆LT;一个UI的SREF =家＆GT;客户详细资料及LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT;一个UI的SREF =约＆GT;招聘详情及LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / NAV＆GT;＆LT;！ - 主要内容 - ＆GT;＆LT; DIV CLASS =容器＆GT;
＆LT;格UI的视图＆gt;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;
app.js
VAR routerApp = angular.module（'routerApp'，['ui.router']）;routerApp.config（函数（$ stateProvider，$ urlRouterProvider）{ $ urlRouterProvider.otherwise（'/家）; $ stateProvider //母国和嵌套视图 .STATE（'家'，{
网址：'/家，
templateUrl：局部home.html做为
}）
.STATE（'home.list'，{
网址：'/名单，
templateUrl：局部家list.html'，
控制器：函数（$范围）{
$ scope.dogs = ['伯恩'，'赫斯基'，'黄金贵宾犬'];
}
}）
// JOB导航节.STATE（'工作'，{
网址：'/ jobdetails'，
templateUrl：jobdetails.html }）
//有关页面和多个命名视图
.STATE（'约'，{
网址：'/约，
观点：{
''：{templateUrl：局部about.html'}，
columnOne @约：{模板：你看我是列！ }，
columnTwo @约：{
templateUrl：表data.html'，
控制器：'scotchController
}
} }）;}）;routerApp.controller（'scotchController'，函数（$范围）{ $ scope.message =测试; $ scope.scotches = [
{
名称：'麦卡伦12'
价格：50
}，
{
名称：'芝华士，皇家礼炮，
价格：10000
}，
{
名称：1937年格兰菲迪'，
价格：20000
}
];}）;routerApp.directive（'jsSidebar'，函数（）{
返回{
链接：功能（范围，元素，ATTRS）{ 警报（'测试'）; }
}
}）;
局部home.html的
＆LT; DIV＆GT;主页的部分页面＆LT; / DIV＆GT;
＆LT;一个UI的SREF =工作＆GT;点击看表＆LT; / A＆GT;
＆LT;格UI的视图＆gt;＆LT; / DIV＆GT;
jobdetails.html
＆LT;脚本＆GT;
//图表库提这比2000lines
＆LT; / SCRIPT＆GT;
＆LT;！ - 在这里排行榜期望的显示效果 - ＆GT;
＆LT; DIV ID =id_of_chart＆GT;＆LT; / DIV＆GT;
＆LT; DIV＆jsSidebar GT;测试目的与LT; / DIV＆GT;
解决方案
NG-视图不会加载模板中的脚本。结果
检查这个.. http://stackoverflow.com/a/18220411/4578788 了解更多详情。
I tried using directives to load the script but its not working, I've an application where it should display a chart(guage meter) inside a partial, tried to paste the script inside partial view but no use, even directives didn't work. But if the page is normally loaded its working, when its used as partial its not showing any chart (script related things)
Any simple example to make load the script inside partial views of angularjs?
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>
jobdetails.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 will not load the scripts inside the template.
Check this.. http://stackoverflow.com/a/18220411/4578788 for more details.
这篇关于Angularjs - JavaScript的不是局部视图里面装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
