Killer – explicitly declare the data model in the controller

Time:2021-10-27
In this article, we will study the benefits of explicitly declaring the data model in the controller for our programming, and what we need to pay attention to in this process; Well, no more nonsense. Let's get to the topic!

Knowledge needed to know

ng-controllerIs a special instruction that takes the parent scope (typically$rootScopeOr another oneng-controllerGenerate a sub scope for the prototype; This inheritance mechanism can create an isolation layer to place methods and data model objects that need to work together.

JavaScript objects are either value copies or reference copies. Strings, numbers and Boolean variables are value copies; Arrays, objects, and functions are copied by reference.

Use raw values in the controller

In the controller, we do not recommend assigning a value to a variable in the form of raw value, but in order to illustrate this problem, we try to use this method to write our program.

We create two controllers, a parent controller and a child controller; Use the data in the parent controller and the child controller respectively, and then modify the data we use in the parent controller and the child controller respectively to see what happens?

The code is shown below

HTML code:

html<div ng-app="MyApp">
    <div ng-controller="ParentController">
        <h3>Parent Section: {{name}}</h3><br/>
        <button ng-click="parentChangeName()">parentChangeName</button>
        <div ng-controller="ChildController">
            <h3>Child Section: {{name}}</h3><br/>
            <button ng-click="childChangeName()">childChangeName</button>
        </div>
    </div>
</div>

JS code:

javascriptangular.module("MyApp", [])
.controller("ParentController", function($scope){
    $scope.name = "dreamapple";
    $scope.parentChangeName = function(){
        $scope.name = "parent dreamapple";
    }
})
.controller("ChildController", function($scope){
    $scope.childChangeName = function(){
        $scope.name = "child dreamapple";
    }
});

Online Code Part1

As for the above code, we still need to analyze it carefully:

First, its performance results are as follows:
(1) If we first click the parent change name button, the parent controller and child controllerh3In label{{name}}All values will beparent dreamapple; Then we click the childchangename button and find that there are only child controllersh3In label{{name}}The value changes tochild dreamapple; In the parent controller{{name}}No change.
(2) If we first click the childchangename button at the beginning, the result is different from that just now, only the child controllerh3In label{{name}}The value changes tochild dreamapple; In the parent controller{{name}}No change. Then, when we click the parent change name button, there are only those in the parent controller{{name}}The value of has changed. The sub controller has not changed.

Because of this, due to the relationship of prototype inheritance, in the initialization state, although our child controller has its own scope, the attribute values and methods are the same as those of the parent controller; Therefore, before any operation of the sub controller, the attribute value in the sub controller is the same as that in the parent controller. Therefore, when you click the parentchangename button, the attribute value in the parent controller changes, so the attribute value in the sub controller also changes. However, when we click the childchangename button again, because the child controller has its own scope, it can only modify the attribute value in its own scope, not the attribute value in the parent controller’s scope.

The second case is also easy to explain, because at the beginning, clicking the childchangename button modifies the attribute value of the child scope. Although we then clicked the parentchangename button, we did not change the attribute value in the child scope, because clicking the parentchangename button can only be initialized (and the attribute is not initialized in the child scope)Online Code Part2), change the attribute values of the parent controller and the child controller. If the attributes in the child controller have been modified or initialized, the parent controller cannot change the attribute values in the child controller.

Explicitly declare the data model in the controller

We will modify the above code to explicitly declare an object instead of using raw values.

The code part is as follows

HTML code:

html<div ng-app="MyApp">
    <div ng-controller="ParentController">
        <h3>Parent Section: {{person.name}}</h3><br/>
        <button ng-click="parentChangeName()">parentChangeName</button>
        <div ng-controller="ChildController">
            <h3>Child Section: {{person.name}}</h3><br/>
            <button ng-click="childChangeName()">childChangeName</button>
        </div>
    </div>
</div>

JS code:

javascriptangular.module("MyApp", [])
.controller("ParentController", function($scope){
    // $scope.name = "dreamapple";
    $scope.person = {
        name: "dreamapple"
    };
    $scope.parentChangeName = function(){
        // $scope.name = "parent dreamapple";
        $scope.person.name = "parent dreamapple";
    }
})
.controller("ChildController", function($scope){
    $scope.childChangeName = function(){
        // $scope.name = "child dreamapple";
        $scope.person.name = "child dreamapple";
    }
});

Online Code Part3

Let’s look at its performance results:
At this time, you will find that whether you click the parent change name button or the child change name button, the parent controller and child controller{{name}}Will change. Why?
Firstly, we create an object in the parent scope, that is, a data model, and there will be references to this object on the child controller. Therefore, no matter which controller we change the properties of this object, it will be reflected in the two controllers.

Here, I want to share with you about the end, but there is another thing to note, that is, when using any instruction that will create a sub scope, if thescopeSet totrue, will have the above characteristics. We can adopt different methods according to our own needs; Well, it’s almost time for a nap. Also, if you think I’m wrong, please point out that we can make progress together.

Recommended Today

Perl beginner’s notes: Hello World

Work needs to start learning Perl, download a window version (5.16): download link http://www.activestate.com/activeperl/downloadsAfter installation, write the first Perl program Copy codeThe code is as follows: #!/usr/bin/perl  print “Hello,World!\n”; Running result: (very much like Python) Copy codeThe code is as follows: c:\Perl>perl HelloWorld.pl  Hello,World! Then I learned: cpan, although I don’t know what this guy […]