scope in Angularjs

cikenerd 发布于2019-08-19 17:07 / 1117人阅读

摘要：基于原型的继承性视图存在嵌套的时候，内层的是可以继承到外层的数据的。这者的区别就是在中继承了中的作用域。通过监听某个的是否发生变化来触发相应的。第三个属性值，当为规定的是比较对象的值，而不是引用。这样可以非常好的将一些可服用的代码抽离出来。

scope基于原型的继承性

视图存在嵌套的时候，内层的controller是可以继承到外层的controller数据的。

scope在angularjs里的继承性(基于原型的继承性)：

    html: 
    
    
        Parent  {{info}}
        
            child  {{info}}

当页面一开始加载完毕之后，通过在parent的input里面输入内容的时候，在child的input里面也会发生响应。这个时候，subController里的info的值，是继承parent里面的mainController的值。

此时，如果在child的input里面输入内容，会发现child里面的info发生了变化，但是parent里面并未发生变化。

此时如果在parent的Input里面输入值的话，仅仅是Parent的info发生了变化，而child的info是不会发生变化的。

然后我再换一种写法

    html:
   
    
        parent  {{msg.info}}
            
                child  {{msg.info}}
            
    
    
    js: 
    app.controller("mainController", function(){
        $scope.msg = {
            info: "message"
        };
    });
    app.controller("subController", function(){
        
    });

ng-model此时变成了某个对象的属性。那么现在不管你更改的是parent中的input还是child中的input，都会引起视图相应的变化。

这2者的区别就是在subController中继承了mainController中的作用域。当ng-model是primitive值时，刚初始化的时候，在subController里面因为，会新建一个相同的变量，这个时候，如果再在subController里面获取这个primitive的时候，就直接在subController里面就能得到。

而如果mainController里面的ng-model是个对象的属性的时候，subController里面ng-model是对这个对象的引用。那么不管更改mainController还是subController里面的ng-model视图里面都会发生变化。

在Angularjs里面$scope有个$watch方法,当需要时更新DOM。通过监听某个model的是否发生变化来触发相应的callback。

依然是上面的例子：

     html:
   
    
        parent  
    
    
    js: 
    app.controller("mainController", function(){
        $scope.msg = {
            info: "message"
        };
        
        $scope.$watch("msg", function(val){
            console.log(val);
        })
    });

除了页面初始化后，控制台会输出{info: "message"}外，不过input里面的值如何变化。控制台都不会输出任何内容了。这是因为$watch是比较的msg这个对象的引用是否发生了变化，很显然这个地方msg的引用(heap里面存放的地址)并没用发生变化，仅仅是msg.info的值发生了变化。
但是我改变另外一种写法：

    $scope.$watch("msg", function(val){
        console.log(val);
    }, true);

这个是否就能监听到msg.info发生变化后,msg的内容了。第三个属性boolean值，当为true,规定的是比较对象的值，而不是引用。

ng-repeat会给每个循环新建一个作用域。

ng-include和ng-view都是动态加载视图，这个时候也会新建作用域

当然还有ng-switch,directive也会有这种scope继承的情况出现。

具体深入理解angularjs的scope，请移步Understanding scopes

Angularjs 1.2 “Controller as” polyfill

    html:
    
    
        {{parent.name}}
        
            {{child.name}}
        
    
    
    js:
    
    app.controller("parentController", ApiParentFn);
    
    function ApiCtrlFn(){
        this.name = "XL";
    }
    
    app.controller("childController", ApiChildFn);
    
    function ApiChildFn(){
        this.name = "xl";
    }

最后视图内容大家可以动手试试。

最近也试着多用这个语法去写控制器，首先写法上更偏向OO的风格。在这个ApiParetnFn上定义不同的model。

    app.controller("mainCtrl", ["$http", ApiCtrlFn]);
    
    function ApiCtrlFn(http){
        this.http = http;
        this.name = "XL";
    }
    
    ApiCtrlFn.prototype = {
        reqPostFn: function(url){
            this.http.get(url).success(function(data){
                xxxx
            })
            .error(function(data){
                xxxx
            })
        },
        changeNameFn: function(name){
            this.name = name;
        }
    }
    
    html:
    
    
        {{this.name}}

在ApiParentFn.prototype上定义不同的方法。这样可以非常好的将一些可服用的代码抽离出来。不同的控制器只需要对构造函数进行实例化，然后调用不同的原型上定义的方法就OK了。

私有云服务器托管 Scopes Scoping scoped scope

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78210.html

创建自定义指令

摘要：我们通常通过其区分大小写的规范化名称例如，来定义指令。在其目前的实现上，我们应该需要去创建一些不同点控制器用来重用这个指令。如此，绑定是理想的将回调函数绑定到指令行为。这被指令调用指明。前缀表示该指令在其父元素上搜索控制文档翻译至angularjs.org. 文档解释了您何时想在AngularJS应用程序中创建自己的指令，以及如何实现它们。 | 建议搭配原文食用 | 什么是指令？在...

zzbo 2019-08-26 11:55 评论0 收藏0
Controller As in Angularjs

摘要：因为在里面是基于原型进行继承的。事实上注入后，即提供了一个，可以在这个上面绑定属性和方法。当使用语法的时候，事实上是绑定到了的对象上面。注意这个地方执行顺序是从子元素开始再到父元素的。即在执行阶段前确保执行完毕。 Controller As angular .module(app, []) .controller(DemoController, ...

mo0n1andin 2019-08-19 17:14 评论0 收藏0
angular性能优化心得

摘要：本文针对的读者具备性能优化的相关知识雅虎条性能优化原则高性能网站建设指南等拥有实战经验。这种机制能减少浏览器次数，从而提高性能。仅会检查该和它的子，当你确定当前操作仅影响它们时，用可以稍微提升性能。搬运自: http://atian25.github.io/2014/05/09/angular-performace/ 不知不觉，在项目中用angular已经半年多了，踩了很多坑...

guqiu 2019-08-19 14:44 评论0 收藏0
Angularjs 开发指南自定义指令（custom directives）

摘要：使用开发，很重要的一步是需要开发自定义的指令。接下来分几个步骤记录如何开发一个自定义的指令。对这个元素及其子元素进行变形之类的操作是安全的。链接函数链接函数负责注册事件和更新。说明和是指令的关键部分，留在下一章中详细讨论。使用Angularjs开发，很重要的一步是需要开发自定义的指令（custom directives）。接下来分几个步骤记录如何开发一个自定义的指令。目录：指令...

calx 2019-08-19 18:15 评论0 收藏0
使用AngularJS构建应用时遇到的问题及解决方案（版本为1.3.9）

摘要：最近在公司使用用完成了一个项目，在此记录一下过程中遇到的问题及解决方案。其他两种方法可参考站内文章控制器如何通信结语以上为我在编写一个应用时遇到的问题及解决方案，记录并分享出来，欢迎大家指正最近在公司使用用AngularJS（1.3.9）完成了一个项目，在此记录一下过程中遇到的问题及解决方案。使用$http服务发送ajax请求时后端无法判断请求是XMLHttpRequest 问题...

cuieney 2019-08-19 17:25 评论0 收藏0