zoukankan      html  css  js  c++  java
  • Part 33 Angular nested scopes and controller as syntax

    Working with nested scopes using $scope object : The following code creates 3 controllers  - countryController, stateController, and cityController. All of these have set name property on the $scope object. 

    var app = angular
                .module("Demo", [])
                .controller("countryController", function ($scope) {
                    $scope.name = "India";
                })
                .controller("stateController", function ($scope) {
                    $scope.name = "Maharashtra";
                })
                .controller("cityController", function ($scope) {
                    $scope.name = "Mumbai";
                });


    Now we want to display Country, State and City names as shown below. 

     

    To get the output as shown above, we will have the following HTML in our view. name property retrieves the correct value as expected. However, the code is bit confusing. 

    <div ng-controller="countryController">
        {{name}}
        <div ng-controller="stateController">
            {{name}}
            <div ng-controller="cityController">
                {{name}}
            </div>
        </div>
    </div>


    Now let us say we want to display the names as shown below. 

     


    To achieve this modify the HTML in the view as shown below. Notice we are using $parent to get the name property value of the immediate parent controller. To get the name property value of the grand parent, we are using $parent.$parent. This can get very confusing if you have many nested controllers and as a result the code gets less readable.

    <div ng-controller="countryController">
        {{name}}
        <div ng-controller="stateController">
            {{$parent.name}} - {{name}}
            <div ng-controller="cityController">
                {{$parent.$parent.name}} - {{$parent.name}} - {{name}}
            </div>
        </div>
    </div>


    Let us see how things change when we use CONTROLLER AS syntax. First change the angular code to support CONTROLLER AS syntax. Notice we are not using $scope anymore with in our controllers, instead, we are using "this" keyowrd.

    var app = angular
                .module("Demo", [])
                .controller("countryController", function () {
                    this.name = "India";
                })
                .controller("stateController", function () {
                    this.name = "Maharashtra";
                })
                .controller("cityController", function () {
                    this.name = "Mumbai";
                });


    With in the view, use CONTROLLER AS syntax. With this change, we are able to use the respective controller object and retrieve name property value. Now there is no need to juggle with $parent property. No matter how deep you are in the nested hierarchy, you can very easily get any controller object name property value. The code is also much readable now.

    <div ng-controller="countryController as countryCtrl">
        {{countryCtrl.name}}
        <div ng-controller="stateController as stateCtrl">
            {{countryCtrl.name}} - {{stateCtrl.name}}
            <div ng-controller="cityController as cityCtrl">
                {{countryCtrl.name}} - {{stateCtrl.name}} - {{cityCtrl.name}}
            </div>
        </div>
    </div>
  • 相关阅读:
    素数筛的2种方法
    c++含结构体的sort()使用
    构建c++二维vector
    c语言输入单字符避免回车的四种方法
    menset()在c++中的作用
    杭电oj hud1092 1093 活用EOF&n--
    EOF在while(scanf("%d",&n))中的作用
    KMP算法
    图解HTTP(3)
    图解HTTP(2)
  • 原文地址:https://www.cnblogs.com/gester/p/6535307.html
Copyright © 2011-2022 走看看