zoukankan      html  css  js  c++  java
  • AngularJS之控制器

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

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

    function my Controller($scope){
      $scope.msg="hello,world!";  
    }

    上面这个创建控制器的方法会污染全局命名空间,更合理的办法是创建一个模块,然后在模块中创建控制器,如下:

    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>
  • 相关阅读:
    字符串 CSV解析 表格 逗号分隔值 通讯录 电话簿 MD
    Context Application 使用总结 MD
    RxJava RxPermissions 动态权限 简介 原理 案例 MD
    Luban 鲁班 图片压缩 MD
    FileProvider N 7.0 升级 安装APK 选择文件 拍照 临时权限 MD
    组件化 得到 DDComponent JIMU 模块 插件 MD
    gradlew 命令行 build 调试 构建错误 Manifest merger failed MD
    protobuf Protocol Buffers 简介 案例 MD
    ORM数据库框架 SQLite 常用数据库框架比较 MD
    [工具配置]requirejs 多页面,多入口js文件打包总结
  • 原文地址:https://www.cnblogs.com/hutuzhu/p/4353137.html
Copyright © 2011-2022 走看看