Home PC Games Linux Windows Database Network Programming Server Mobile  
           
  Home \ Programming \ AngularJS notes --- Scope and controller     - ASM Management - How to Rename diskgroup (Database)

- Linux System Getting Started Learning: From VirtualBox from the client host access NAT (Linux)

- OpenGL Programming Guide (8th edition of the original book) - compute shader (Programming)

- How to build a custom exclusive Ubuntu Live CD (Linux)

- Let Mac OS X dedicated high-speed mobile hard disk can also be read in Linux (Linux)

- CentOS 6.5 boot automatically mount the hard drive (Linux)

- How to install web crawler tool in Ubuntu 14.04 LTS: Scrapy (Linux)

- CentOS ClamAV antivirus package updates (Linux)

- To change CentOS7 runlevel (Linux)

- How to use SHA256 checksum files download (Linux)

- HTTPS Encryption Algorithm (Linux)

- php for Linux the MySQL extension module installation and configuration (Database)

- ImageMagick Tutorial: How to cut images in Linux command line (Linux)

- Oracle Database asynchronous IO cause slow query response (Database)

- Linux installed xdotool simulate keystrokes and mouse movements (Linux)

- How to understand the difference between synchronous and asynchronous non-blocking blocking (Programming)

- WEB-based Android Remote Tools Python implementation (Programming)

- Oracle 10046 Event (Database)

- Redis logging system (Database)

- MySQL stored procedures execute dynamic sql statement (Database)

 
         
  AngularJS notes --- Scope and controller
     
  Add Date : 2017-08-31      
         
         
         
  What is the scope. What is the controller, the scope includes the functions and data required for rendering a view, it is the only source of all views. Scopes can be understood as attempts to model (ViewModel). The scope can be contained between the relationship can be a standalone relationship by setting different ng-Controller to make $ scope in different scopes below.

I. $ rootScope

1.1 rootScope can be understood as a global variable, once the assignment is valid for the entire module. RootScpoe does not depend on any one controller, app.run the code is executed when the module is loaded it can be understood as Silverlight MVVM inside oninit methods.

< Html>
< Script src = "angular.min.js"> < / script>
< Script type = "text / javascript">
    var app = angular.module ( 'myapp', []);
    app.run (function ($ rootScope) {
        $ RootScope.message = "hello frank!";
    });
< / Script>
< Head>
    < Div ng-app = "myapp">
        < H1> {{message}} < / h1>
    < / Div>
< / Head>
< Body>
< / Body>
< / Html>

1.2 AngularJS will give priority to get the value of the Controller $ scope to add.

Code is as follows: There are three {message} testControl2 at $ scope given the message to re-value.

< Html>
< Script src = "angular.min.js"> < / script>
< Script type = "text / javascript">
    var app = angular.module ( 'myapp', []);
    app.run (function ($ rootScope) {
        $ RootScope.message = "hello frank!";
    });

    app.controller ( 'testControl1', function () {
        
    });

    app.controller ( 'testControl2', function ($ scope) {
        $ Scope.message = "hello loch!";
    });
    
< / Script>
< Head>
    < Div ng-app = "myapp">
        {{Message}}
        < Div ng-controller = "testControl1">
            {{Message}}
        < / Div>
        < Div ng-controller = "testControl2">
            {{Message}}
        < / Div>
    < / Div>
< / Head>
< Body>
< / Body>
< / Html>

Run Results: testControl2 under the message is modified.

hello frank!
hello frank!
hello loch!

          II. The controller (ng-Controller)

            ng-Controller atmosphere containing both cases one is, the other is independent. Let us called the father and son relationship and sibling relationship it.

            2.1 paternity

            2.1.1 code is as follows: ChildController contained in ParentController inside, two button are on the Count field assignment.

< Html>
< Script src = "angular.min.js"> < / script>
< Script type = "text / javascript">
    var app = angular.module ( 'myapp', []);

    app.controller ( 'ParentController', function ($ scope) {
        $ Scope.Count = 1;
        $ Scope.addParent = function () {
            $ Scope.Count + = 1;
        }
    });

    app.controller ( 'ChildController', function ($ scope) {
        // $ Scope.Count = 1;
        $ Scope.addChild = function () {
            $ Scope.Count + = 1;
        }
    });
    
< / Script>
< Head>
    < Div ng-app = "myapp">
        < Div ng-controller = "ParentController">
            < Span> {{Count}} < / span>
            < Button ng-click = "addParent ()"> ParentClick < / button>
            < Div ng-controller = "ChildController">
                < Span> {{Count}} < / span>
                < Button ng-click = "addChild ()"> ChildClick < / button>
            < / Div>
        < / Div>
    < / Div>
< / Head>
< Body>
< / Body>
< / Html>

2.1.2 :( operating results in the above demo, there are a bunch of commented-out code)

A code is Note: When a start clicking ParentClick increase when Count two together, and then click ChildClick ChildDiv only when the Count is increasing, then go back and click ParentClick time, only in self-energizing ParentCount

B. codes have not been annotated: between the self-energizing are separate and distinct and complementary association.

2.1.3 Summary:

Because AngularJS will go first to the default value under the current Controller, then go find the parent Controller value, if it can not find value rootScope went, for Class A case did not click ChildClick time, ChildController also Count value is not set, then the corresponding Count only takes a value scope.count of ParentController go inside. when you click ChildClick after, ChildController of $ scope.count is created, then two independent Controller begins.

2.2 fraternal relations.

The result: two Controller under Count independent, self-energizing each other.

< Html>
< Script src = "angular.min.js"> < / script>
< Script type = "text / javascript">
    var app = angular.module ( 'myapp', []);

    app.controller ( 'BrotherOne', function ($ scope) {
        $ Scope.Count = 1;
        $ Scope.addParent = function () {
            $ Scope.Count + = 1;
        }
    });

    app.controller ( 'BrotherTwo', function ($ scope) {
        $ Scope.Count = 1;
        $ Scope.addChild = function () {
            $ Scope.Count + = 1;
        }
    });
    
< / Script>
< Head>
    < Div ng-app = "myapp">
        < Div ng-controller = "BrotherOne">
            < Span> {{Count}} < / span>
            < Button ng-click = "addParent ()"> ParentClick < / button>
        < / Div>
        < Div ng-controller = "BrotherTwo">
                < Span> {{Count}} < / span>
                < Button ng-click = "addChild ()"> ChildClick < / button>
        < / Div>
    < / Div>
< / Head>
< Body>
< / Body>
< / Html>

III. Benpian summary

A. $ rootScope == Global Variables
B. variable bindings default start to fetch $ scope of the current Controller
     
         
         
         
  More:      
 
- JQuery implements the same content merge cells (Programming)
- Ubuntu 14.04 How to install Cinnamon 2.4.5 (Linux)
- Use ISO document production OpenStack used CoreOS mirror (Linux)
- The Rabbitmq installation under CentOS 6.4 (Linux)
- Linux instructions and examples GPG encryption and decryption (Linux)
- Python class of operator overloading (Programming)
- The difference between statement and preparedStatement of the jdbc (Database)
- Teach you how to protect the security of Linux desktop (Linux)
- Linux Shell debugging (Programming)
- Echo Command Examples (Linux)
- MySQL Server Time Synchronization Problem (Database)
- Ubuntu firewall installation and configuration (Linux)
- Hazelcast integration with MongoDB (Database)
- Linux (Ubuntu) How iptables port mapping (Server)
- How to use the internal network IP forwarding to connect to the Internet on Linux (Linux)
- JavaScript prototype and prototype chain and project combat (Programming)
- Father of Python: Why Python zero-based index (Programming)
- To install Xen in Ubuntu 12.04 (Linux)
- Upgrading KDE Plasma 5.3 in Ubuntu 15.04 (Linux)
- Build Docker based MongoDB replication cluster environment (Database)
     
           
     
  CopyRight 2002-2020 newfreesoft.com, All Rights Reserved.