`
流浪的我
  • 浏览: 34151 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

angularjs 控制器

 
阅读更多

控制器在Angularjs中的作用是增强视图,它实际就是一个函数,用来向视图中的作用域添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为。

当我们在页面上创建一个控制器时,Angularjs会生成并传递一个$scope给这个控制器,由于Angularjs会自动实例化控制器,所以我们只需要写构造函数即可。下面的例子展示了控制器初始化:

var myApp=angular.module("myApp",[]);
myApp.controller("myController",function($scope){
 $scope.msg="hello,world!";
})

用内置指令ng-click可以将按钮、链接等其他任何DOM元素同点击事件进行绑定。ng-click指令将浏览器中的mouseup事件,同设置在DOM元素上的事件处理程序绑定在一起(例如,当浏览器在某个DOM元素上触发了点击事件,函数就会被调用)。和前面的例子类似,绑定看起来是这样的:

<div ng-controller="FirstController">
    <h4>The simplest adding machine ever</h4>
    <button ng-click="add(1)" class="button">Add</button>
    <a ng-click="subtract(1)" class="button alert">Subtract</a>
    <h4>Current count: {{ counter }}</h4>
</div>

按钮和链接都被绑定在了内部$scope的一个操作上,当点击任何一个元素时AngularJS都会调用相应的方法。注意,当设置调用哪个函数时,会同时用括号传递一个参数(add(1))

app.controller('FirstController', function($scope) {
    $scope.counter = 0;
    $scope.add = function(amount) { 
        $scope.counter += amount; };
    $scope.subtract = function(amount) {
        $scope.counter -= amount; };
});

Angularjs与其他框架的最大区别在于,控制器并不适合来执行DOM操作、格式化或数据操作,以及除存储数据模型之外的状态维护操作,它只是视图和$scope之间的桥梁。

控制器嵌套(作用域包含作用域)

AngularJS应用的任何一个部分,无论它渲染在哪个上下文中,都有父级作用域存在。对于ng-app所处的层级来讲,它的父级作用域就是$rootScope。

默认情况下,AngularJS在当前作用域中无法找到某个属性时,便会在父级作用域中进行查找。如果AngularJS找不到对应的属性,会顺着父级作用域一直向上寻找,直到抵达$rootScope为止。如果在$rootScope中也找不到,程序会继续运行,但视图无法更新。

通过例子来看一下这个行为。创建一个ParentController,其中包含一个user对象,再创建一个ChildController来引用这个对象:

app.controller('ParentController', function($scope) {
    $scope.person = {greeted: false};
});
app.controller('ChildController', function($scope) {
    $scope.sayHello = function() {
    $scope.person.name = 'Ari Lerner';
};
});

如果我们将ChildController置于ParentController内部,那ChildController的$scope对象的父级作用域就是ParentController的$scope对象。根据原型继承的机制,我们可以在子作用域中访问ParentController的$scope对象。

<div ng-controller="ParentController">
    <div ng-controller="ChildController">
        <a ng-click="sayHello()">Say hello</a>
    </div>
    {{ person }}
</div>

 以上是我对控制器的了解,希望大家指教。

 

分享到:
评论

相关推荐

    AngularJS 控制器 controller的详解

    在本文中,我们将深入探讨AngularJS控制器的几个关键知识点,包括控制器的概念、作用、实例详解以及注意事项。 首先,控制器是JavaScript函数,用于增强视图。它们通常在应用中定义,用来初始化作用域对象($scope...

    AngularJS控制器详解及示例代码

    AngularJS控制器是AngularJS框架中的核心概念之一,它负责管理与视图相关的业务逻辑,以及与模型层数据的交互。AngularJS通过依赖注入的方式,将$scope对象注入到控制器函数中,作为控制器与视图之间的桥梁。 在...

    详解AngularJS控制器的使用

    总结来说,AngularJS控制器是实现视图逻辑、处理用户输入和操作数据的主要方式。控制器负责与作用域对象进行交互,作用域对象提供了一个上下文环境,使得视图可以访问控制器中的数据和函数。通过模块化的方式组织...

    AngularJS控制器之间的数据共享及通信详解

    本文将深入讲解AngularJS控制器间的通信机制。 首先,需要了解AngularJS提供的一些内置服务和机制,用以实现控制器间的数据共享和通信。 **单例服务**: 单例服务是AngularJS提供的一种对象实例化方式,它确保无论...

    AngularJS精妙绝伦的控制器

    这篇博客将深入探讨AngularJS控制器的工作原理、用途以及如何巧妙地运用它们来提升应用程序的性能。 ### 1. 控制器的基本概念 在AngularJS中,控制器是应用业务逻辑的主要载体,它们负责处理用户交互、数据操作和...

    AngularJS控制器controller给模型数据赋初始值的方法

    在本实例中,我们将探讨如何在AngularJS控制器中为模型数据赋予初始值,以便在页面加载时即展示预设的数据。 首先,我们需要了解AngularJS的双数据绑定机制。这是AngularJS的一大特色,它使得视图和模型之间可以...

    详谈AngularJs 控制器、数据绑定、作用域

    每个AngularJS控制器都有一个或多个作用域对象($scope),每个作用域对象都可以包含数据和方法。作用域在控制器中被创建,并且会创建一个层级结构,从而可以实现父子作用域之间的数据共享和事件冒泡。 作用域生命...

    ngOnDemand:一种按需加载 AngularJS 控制器的方法

    一种按需加载 AngularJS 控制器的方法。 这是一种在需要时加载 AngularJS 控制器的方法。 当控制器被请求时,它将通过 xhr 加载脚本。 版本 0.0.3 都多的 添加测试 添加带有版本控制的离线存储 - 这个想法是在加载...

    AngularJS控制器之间的通信方式详解

    随着应用复杂度的增加,不同的控制器之间往往需要进行数据通信,本文将详细介绍AngularJS中控制器之间通信的几种主要方式。 一、利用作用域的继承方式 在AngularJS中,作用域(Scope)是连接控制器和视图的桥梁。...

    AngularJs控制器中的依赖注入

    **AngularJS控制器中的依赖注入详解** AngularJS是一个强大的JavaScript框架,用于构建动态Web应用程序。它引入了许多创新概念,其中一项核心特性就是依赖注入(Dependency Injection,简称DI)。依赖注入是解决...

    AngularJS 控制器

    AngularJS 应用程序被控制器控制。 ng-controller 指令定义了应用程序控制器。 控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。 AngularJS 实例 名: 姓: 姓名: {{firstName + " " + ...

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

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

    AngularJS入门教程之控制器详解

    AngularJS 应用程序被控制器控制。 ng-controller 指令定义了应用程序控制器。 控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。 AngularJS 实例 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;...

    ionic项目简介以及Angularjs 基础

    - **AngularJS 控制器**:负责应用的主要逻辑,可以包含应用的数据和方法。 - **AngularJS $http 请求数据**:用于从服务器请求数据。 - **AngularJS 过滤器**:用于格式化数据。 - **AngularJS 模块**:是AngularJS...

    angularjs实现上传图片并且预览

    这里的`ng-model`绑定到AngularJS控制器中的`imageFile`变量,`onchange`事件触发上传函数。 2. **图片预览**:在用户选择图片后,我们可以在页面上实时预览图片。这可以通过JavaScript的FileReader API实现。在...

    AngularJS 0006:控制器

    **AngularJS 0006:控制器** 在AngularJS中,控制器是应用程序的主要逻辑部分,它们与视图(views)和模型(models)紧密协作,实现了数据绑定和业务逻辑处理。在本文中,我们将深入探讨AngularJS中的控制器及其在...

Global site tag (gtag.js) - Google Analytics