关于angular的include指令,include的页面无法加载js问题解决
来源:互联网 发布:淘宝买家权重信用查询 编辑:程序博客网 时间:2024/06/11 16:39
晚上在看angular时候,遇到了一个问题
问题描述:
index.html
<!DOCTYPE html><html ng-app='a'><head></head><body ng-controller='first'><div>hello</div><div ng-include=b.html></div><script type="text/JavaScript" src='https://code.angularjs.org/1.5.10/angular.min.js'></script><script type="text/JavaScript" src="/public/javascripts/news_app.js"></script></body></html>
b.html
<!DOCTYPE html><html ng-app='a'><head></head><body ng-controller='first'><div>hahaha</div><script style='text/javascript' src='c.js'></script><script type="text/JavaScript" src='https://code.angularjs.org/1.5.10/angular.min.js'></script><script type="text/JavaScript" src="/public/javascripts/news_app.js"></script></body></html>
news_app.js
var NewsPub=angular.module('a',[]);NewsPub.controller('first',['$scope','$http','$window',function($scope,$http,$window){ });
你会发现,c.js根本没有被调用!!!!!
我以为自己哪里因为粗心写错了变量,然后找了好半天自己变量问题,郁闷。。。。
后来我就各种百度,哈哈哈,原来这是angular的某种机制,最终发现有个人在stack上找到了解决方法,现在归纳使用如下:
在news_app.js加入如下代码
news_app.js
问题解决~~~~~~~~~(function (ng) { 'use strict';var app = ng.module('ngLoadScript', []);app.directive('script', function() { return { restrict: 'E', scope: false, link: function(scope, elem, attr) { if (attr.type==='text/javascript-lazy') { var s = document.createElement("script"); s.type = "text/javascript"; var src = elem.attr('src'); if(src!==undefined) { s.src = src; } else { var code = elem.text(); s.text = code; } document.head.appendChild(s); elem.remove(); } } };});}(angular));var NewsPub=angular.module('a',['ngLoadScript']);NewsPub.controller('first',['$scope','$http','$window',function($scope,$http,$window){ });
0 1
- 关于angular的include指令,include的页面无法加载js问题解决
- freemarker 的 include指令,引入另一个页面
- freemarker 的 include指令,引入另一个页面
- 关于include指令与include Action的区别
- 关于include指令和include动作的区别
- JSP的include指令
- JSP的include指令
- #include指令的作用
- JSP的include指令
- JSP的include指令
- include servlet的问题解决
- jsp指令的include指令
- include标签与include指令的比较
- include 动作和 include 指令 的区别
- include指令与include标签的区别
- include指令和include行为的区别
- <jsp:include>与include指令的区别
- <jsp:include>与include指令的区别
- Filp Game
- mybatis常用jdbcType数据类型
- apk的安装分析
- (二)网络设备介绍-------交换机&路由器的工作原理
- 们--加强斐波那契
- 关于angular的include指令,include的页面无法加载js问题解决
- JPA学习笔记【五】【映射关联关系】
- C#static关键字的作用
- 折线分割平面
- VR直播系统搭建——硬件系统的搭建
- if的用法
- 《Head First HTML with CSS & XHTML》要点总结
- 第四套
- java中关于比较器comparator和comparable