The concept of using independent scopes in Angular-JS Tutorial-php.cn

The concept of using independent scopes in Angular

php中世界最好的语言

Release： 2018-03-12 17:04:49

Original

1388 people have browsed it

This time I will bring you the concept of using angular independent scope. What are the precautions for using angular independent scope? The following is a practical case, let’s take a look.

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
    <ceshi></ceshi>
    <script src="angular.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.directive(&#39;ceshi&#39;,function(){            var option = {
                template:&#39;<p>{{abc}}</p>&#39;
            };            return option;
        });
        myApp.controller(&#39;mainController&#39;,function($scope){
            $scope.abc = &#39;ericzheng&#39;;
        });    </script></body></html>

Copy after login

When we create a command ourselves, it is definitely not possible to use it only once. It must be used repeatedly, sometimes within a page or within a

controller

Need to be used multiple times. Similar to the above scenario, changing data in any input box will cause the data in other tags to change at the same time. This is obviously not what we want. At this time, an independent scope is needed.
To convert to an independent scope, you only need one line of code:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
    <ceshi></ceshi>
    <script src="angular.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.directive(&#39;ceshi&#39;,function(){            var option = {
                template:&#39;<p>{{abc}}</p>&#39;,
                scope:{}
            };            return option;
        });
        myApp.controller(&#39;mainController&#39;,function($scope){
            $scope.abc = &#39;ericzheng&#39;;
        });    </script></body></html>

Copy after login

One-way

Data binding

Operator

, the content within double quotes is treated as string for binding

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
    <my-directive name="aaaa"></my-directive>
    <script src="angular.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.directive(&#39;myDirective&#39;,function(){            var option = {
                template:&#39;<p>wew{{name}}<p/>&#39;,
                scope:{
                    name:&#39;@&#39;
                }
            };            return option;
        });
        myApp.controller(&#39;mainController&#39;,function($scope){
        });    </script></body></html>

Copy after login

One-way binding, obtains the value from the attribute of the current instruction, and then assigns it to the current independent scope This attribute

The concept of using independent scopes in Angular Two-way data binding

=The operator is bound to a variable

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
    <input type="text" ng-model="abc">
    <my-directive name="abc"></my-directive>
    <script src="angular.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.directive(&#39;myDirective&#39;,function(){            var option = {
                template:&#39;<p>wew{{name}}<input ng-model="name"><p/>&#39;,
                scope:{
                    name:&#39;=&#39;
                }
            };            return option;
        });
        myApp.controller(&#39;mainController&#39;,function($scope){
            $scope.abc = &#39;ericzheng&#39;;
        });    </script></body></html>

Copy after login

name="abc"This is In the core, what is connected to the left is the independent scope, and what is connected to the right is the model in the external scope abc

##The behavior of using the parent scope The concept of using independent scopes in Angular

& The content of the operator binding is a method

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
    <my-directive fn1="fn2(name)"></my-directive>
    <script src="angular.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.directive(&#39;myDirective&#39;,function(){            var option = {                restrict:&#39;E&#39;,                template:&#39;<button ng-click="fn1({name:\&#39;username\&#39;})">wfewef</button>&#39;,                scope:{                    fn1:&#39;&&#39;
                }
            };            return option;
        });
        myApp.controller(&#39;mainController&#39;,function($scope){
            $scope.fn2 = function(attr){                console.log(attr);
            }
        });    </script></body></html>

Copy after login

How to understand: The concept of using independent scopes in Angular Regardless of how the instruction is implemented internally, first look at how to use it, and then look at the corresponding How are the variables or methods in the parent scope defined.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!