前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >anjularjs ng-include造成的作用域问题

anjularjs ng-include造成的作用域问题

作者头像
陨石坠灭
发布2018-10-19 15:20:51
7380
发布2018-10-19 15:20:51
举报
文章被收录于专栏:全栈之路

使用angularjs开发,有时候页面太大,代码行数太多,这时候会造成代码难以维护,以及查找和阅读代码变得越来越困难。而html页面就可以用ng-include将代码代码进行分页,但是ng-include自带作用域,很可能造成网页无法造成运行的后果。

接下来,说一下我的处理方式: - 方法一:使用controller别名

在声明ng-controller时这样写:

代码语言:javascript
复制
<div ng-controller="indexController as index" >
...
</div>

然后在indexController中使用this来定义变量,而不是$scope,这样indexController的所有子作用域都能通过index.来使用变量了,而不需要担心用ng-include分离代码时作用域造成的困恼。

  • 方法二:在子作用域实现父作用域的方法(钩子方法)

这个方法可以运用于表单。

代码语言:javascript
复制
<form name="myForm">
...
</form>

在indexController的js代码中可以直接用$scope.myForm来操作表单,但是要初始化后才能使用。如果表单的html代码放在了ng-include包含的作用域中,那么就不能获取到表单了

解决办法:

在indexController的js代码写上空方法:

代码语言:javascript
复制
this.getMyForm = function(){
  return  null;
};

然后使用ng-include的页面也说明一个controller

代码语言:javascript
复制
<div ng-controller="subController" >
...
</div>

在subController的js代码中写道:

代码语言:javascript
复制
$scope.index.getMyForm = function(){
  return $scope.myForm;
};

当然,在indexController要获取myForm使用this.getMyForm()就可以了,使用之前要记得判空。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018/09/02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档