`
v7sky
  • 浏览: 76374 次
文章分类
社区版块
存档分类
最新评论

【AngularJS】controller的继承

阅读更多
谈到angularJS controller的继承,一般都会想到父子scope,对应的父子controller,才能做好继承。
实践中有这样的一个场景,有2套页面,页面组件,风格大部分都一样,不同的可能是绑定的数据等稍有不同,如果简单copy一下html模板,controll的js文件,也能达到完成任务的效果,但是坏处是一份代码写了2边,如果万一要调整代码,还要改写2份,那AngularJS有没有提供这种场景下的controller继承实现呢

有,那就是$controller 服务,参考 https://docs.angularjs.org/api/ng/service/$controller

这个东西本来是做单元测试的,例如如下代码:



实际项目中,如下这么用,更方便



看下接口定义:
$controller(constructor, locals);

第一个参数不难理解。
第二个,一般都这么写{$scope:$scope}。原因是,scope是html和controller之间的粘合剂,它和html强绑定,故而当想继承某个controller时,要把当前绑定的scope传入进去
  • 大小: 91.5 KB
  • 大小: 71.7 KB
0
3
分享到:
评论

相关推荐

    AngularJS Controller作用域.docx

    1. **继承性**:在AngularJS中,作用域是按照层级结构组织的,子Controller会继承其父Controller的作用域。这意味着,如果一个Controller嵌套在另一个Controller内,那么子Controller将能访问到父Controller的所有...

    AngularJS中controller控制器继承的使用方法

    AngularJS是一个流行的前端JavaScript框架,它允许开发者使用MVC(Model-View-Controller)设计模式来构建单页应用(SPA)。AngularJS中的控制器(controllers)是应用中最重要的组件之一,负责增强HTML的行为。在...

    AngularJS Controller作用域

    在AngularJS中,子作用域会继承父作用域的属性,但具有自己的独立副本,从而避免了属性覆盖的问题。子作用域的数据更改不会影响到父作用域,但子作用域可以访问父作用域的数据。当有多个嵌套作用域时,如果尝试访问...

    angular-scope-inheritance:测试 AngularJS 范围继承的一些概念

    AngularJS 范围继承 测试 AngularJS 范围继承的一些概念。 - controller语法 - controllerAs语法,等于控制器的名称。 - controllerAs语法,不同的控制器名称。

    对angularjs框架下controller间的传值方法详解

    在AngularJS中,每个Controller都会创建一个新的作用域,它会继承其父级Controller的作用域,直到顶级的$rootScope。如果在当前作用域找不到某个属性,AngularJS会向上搜索,直到在$rootScope中找到或找不到为止。...

    对angularJs中controller控制器scope父子集作用域的实例讲解

    本文将深入探讨AngularJS中`controller`的`scope`如何在父子控制器间进行作用域继承以及可能出现的隔离情况。 首先,我们要理解`scope`的基本概念。在AngularJS中,每个`controller`都有一个关联的`scope`对象,它...

    AngularJS控制器controller正确的通信的方法

    在AngularJS中,作用域($scope)是基于原型继承的机制工作的。这意味着子控制器可以访问父控制器中定义的属性和方法。这种机制实现的基础是$rootScope与子作用域之间的层级关系。在实际开发中,控制器通常会嵌套...

    angularjs1.4js类库

    2. **ControllerAs语法**:为了更好地遵循面向对象编程的原则,1.4版本推荐使用`controllerAs`语法,将控制器实例绑定到视图的特定作用域变量,使得代码更加清晰和易于理解。 3. **$http服务增强**:$http服务在1.4...

    AngularJS控制器继承自另一控制器

    AngularJS里控制器继承,常用的就是作用域嵌套作用域。默认情况下,当前作用域中无法找到某个属性时,就会在父级作用域中进行查找,若找不到直至查找到$rootScope。 但有些情况下,rootScope下就是我们的controller...

    通过angularjs的ng-repeat指令看scope的继承关系

    在AngularJS中,每个Controller都有一个与之关联的Scope,它是应用数据的容器。Scope分为两种类型:$rootScope(根Scope)和子Scope。所有其他的Scope都是$rootScope的后代,形成了一个树状结构。当在HTML模板中使用...

    AngularJS 0005:作用域

    每个控制器(Controller)都有一个关联的作用域,而这些作用域可以有子作用域。当创建一个新的控制器时,会默认创建一个新的作用域,它成为父作用域的子作用域。这种层级关系使得数据可以在不同层级之间共享和传递。...

    angularjs 子模块实战例子 (切换效果)

    myAppChildModule.controller('ChildController', ['$scope', function($scope) { // 控制器逻辑 }]); ``` 指令是AngularJS的一大特色,它们允许我们在DOM上定义行为。在子模块中定义的指令可以专门用于实现切换...

    AngularJs concepts详解及示例代码

    作用域继承自其父作用域,这使得子作用域能够访问父作用域中的属性和方法。 三、数据绑定(Data Binding) 数据绑定是AngularJS的核心特性之一,它允许将模型中的数据和视图中的HTML元素直接绑定在一起。当模型数据...

    详解JavaScript的AngularJS框架中的作用域与数据绑定

    本文将详细解析AngularJS中的作用域与数据绑定机制,包括作用域的创建、作用域的继承以及数据绑定的方式。 作用域(Scope)是AngularJS中的核心概念,它类似于其他编程语言中的作用域,但与页面的DOM结构紧密相关。...

    AngularJS语法详解(续)

    可以创建嵌套的控制器来共享数据和函数,这种继承实际上发生在$scope对象上。 4. 暴露模型数据 AngularJS使用$scope对象暴露模型数据。可以通过表达式直接操作$scope中的属性,也可以使用ng-model指令在表单项上...

    AngularJS内置指令

    对于作用域问题,AngularJS中的作用域是以原型继承的方式工作的。当ng-controller指令被应用时,它会创建一个新的子作用域,这个子作用域继承了其父作用域的属性和方法。但是,祖先作用域中的变量并不直接可见于子...

    angularjs基本概念全

    AngularJS遵循MVC设计模式,将应用拆分为Model、View和Controller三个部分,实现职责分离。Model负责数据的管理,View负责数据的展示,Controller处理用户的交互。通过模块(Module)来组织这些部分,可以方便地构建...

Global site tag (gtag.js) - Google Analytics