AngularJs 使用 ui-router , 子页面里面的 js 不执行什么鬼？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3286 天前的主题，其中的信息可能已经有所发展或是发生改变。

父页面为

<body ng-app="test">

    <!-- 顶部加载页面的地方 -->
    <div ui-view=""></div>
</body>

子页面为：

<h1>Hello world</h1>
    <script>
      alert("Hello world");
</script>

使用 ui-router 进行加载

$stateProvider
    .state('test', {            
        url:"/test",
        templateUrl:"pages/test.html"  
    })

页面加载进来了，但是哪个 alert 没有执行，怎么让他执行啊？

页面

test

ui-router

script

29 条回复 • 2015-11-28 03:21:06 +08:00

haogre

2015-11-27 15:37:29 +08:00

sneezry

2015-11-27 15:42:11 +08:00 via iPad

所以 C 和 V 你还是没有分开…

hahastudio

2015-11-27 15:52:08 +08:00

http://stackoverflow.com/questions/21336350/angularjs-inline-script-in-the-included-html-template
You need jQuery (load it before Angular)

zythum

2015-11-27 15:56:01 +08:00

估计 AngularJs 是直接 innerHTML 进来的。（不过不 innerHTML 进来还能怎么进来呢）。那么里面的 script 标签是不会执行的。

对此需要扫描插入区域的 script 标签。区内容 eval()一下（这里需要考虑下字面量 eval 还是全局函数 eval 的对于 this 的区别。如果不知道用后面的方法）。或者把这个标签 remove 掉再在 body 里面插入一次。

你看 query 的 html()是可以执行 script 标签的吧。因为人家帮你做了上面的事情。(不过这个 jquery 在 2.0 的时候移除了这歌处理。 1.x 版本是有的。见 manipulation.js 文件)

wensonsmith

2015-11-27 16:07:10 +08:00

@haogre 我放在 JS 里面，然后在子页面中添加 <script src="test.js"> , 这样 state 加载进来以后，还是没用，网络请求都没有请求这个 js

wensonsmith

2015-11-27 16:08:09 +08:00

@sneezry 这个 state 页面需要一个 jquery 生成二维码的 js, 不知道怎么分开啊

wensonsmith

2015-11-27 16:10:56 +08:00

@zythum 在哪里去执行这个 eval() 啊？ ui-router 直接就给怼进去了啊， ui-router 子页面的 js 文件都没法加载：（

wensonsmith

2015-11-27 16:12:54 +08:00

@hahastudio 多谢，不知到 google 怎么搜关键词啊

dong3580

2015-11-27 16:13:54 +08:00

@wensonsmith
1.你这样就得把渲染的标注为非安全的 html ，不推荐这么搞，
2.js 加参数生成二维码呀,
3.或者，后端生成，加链接弹窗，用户点的时候请求后端，返回图片链接。
@sneezry 说得对，你还是没问题，搅在了一起以后你自己都不好维护了。

zythum

2015-11-27 16:14:08 +08:00

给你个馊主意

把你的 script 改成下面的。

<img src="about:blank"
onerror="document.body.appendChild(document.createElement('script')).src='test.js'"/>

xss 专用语句....

23333333

sneezry

2015-11-27 16:16:21 +08:00

@wensonsmith 具体情况我不太清楚，我说一下我自己的直观感觉，具体实现可能还需要你自己考虑一下。 jQuery 的二维码生成库直接在 index.html 引用，然后在 state 这个 view 里绑定一个 controller ，在这个 controller 里封装生成二维码的方法，最后把生成二维码相关的数据写在 dom 的 attribute 里，我觉得这样就可以了。

hahastudio

2015-11-27 16:16:40 +08:00

@wensonsmith Embed javascript in angular

klesh

2015-11-27 16:19:54 +08:00

1. 在 index.html 里面引用生成二维码的 js 类库文件。
2. 给你的 state 加个 controller
3. 在你的 template 里面，加个放置二维码结果的标签如：<div id="qrcode"></div>
4. 在 controller 里面，利用 $timeout ，延时一定时间，如 100ms ，再执行生成二维码的生成操作。如
controller('TestCtrl', function($scope, $timeout) {
$timeout(function(){
$scope.qrcode = $scope.qrcode || new QRCode('#qrcode'); // 假定是这样初始化
$scope.qrcode.render('hello world');
}, 100)
})

klesh

2015-11-27 16:20:24 +08:00

```js
var test = 'code block';
```

dong3580

2015-11-27 16:21:15 +08:00

@zythum
不必要这样，直接 img 引用图片链接，用户需要的时候点击一下 display:block 不就出来了
我这边是每次打开页面后端调用 zxing 的生成二维码，到缓存链接

@wensonsmith
你就把 angularjs 当成 js 一个插件，类似 jquery 一样，两者都是可以互相一起混用的，都是 js ，大胆写吧，

JenJieJu

2015-11-27 16:21:23 +08:00

执行写在 ctrl 里啊。。。。

wensonsmith

2015-11-27 16:24:06 +08:00

@dong3580 还是分开的好，琢磨下怎么搞。多谢啊！

wensonsmith

2015-11-27 16:24:28 +08:00

@zythum 。。。这个法子也是醉了！

wensonsmith

2015-11-27 16:24:55 +08:00

@sneezry 恩，我现在的思路也差不多是这样，搞搞试一试

wensonsmith

2015-11-27 16:25:34 +08:00

@hahastudio Nice ！！！我一直搜什么 ui-route js not work 。。。。啥都找不到，英语渣

wensonsmith

2015-11-27 16:27:20 +08:00

@klesh 为啥要延迟 100ms .. 刚接触，不太懂

yimity

2015-11-27 16:38:13 +08:00

angular.module('core').directive('loadScript', function() {
return {
restrict: 'EA',
terminal: true,
link: function(scope, element, attr) {
if (attr.ngSrc) {
var s = document.createElement('script');
s.src = attr.ngSrc;
document.body.appendChild(s);
}
}
};
});

<div load-Script ng-src="/jquery.js"></div>

wensonsmith

2015-11-27 16:43:37 +08:00

@JenJieJu
@yimity 多谢！

haogre

2015-11-27 16:51:28 +08:00

放路由首页面里啊 xxdd

zythum

2015-11-27 17:44:01 +08:00

@wensonsmith 但是管用并且改动最小。黑科技什么的，没有做不到的，只有想不到的。

klesh

2015-11-27 17:49:32 +08:00

@wensonsmith 因为 controller 是先于 template 执行的。 timeout 就是等 dom 树准备好之后再执行。