Detailed explanation of the use of angular's scopel directive-HTML Tutorial-php.cn

This time I will bring you a detailed explanation of the use of angular's scopel instruction. What are the precautions for using angular's scopel instruction? The following is a practical case, let's take a look.

Let’s create a custom directive

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .primary{            background: red;
        }    </style></head><body ng-app="myApp">
    <div ng-controller="mainCtrl">
        <my-btn></my-btn>
    </div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.controller(&#39;mainCtrl&#39;,[&#39;$scope&#39;,function($scope){
            $scope.myClass = &#39;primary&#39;;
        }]);
        myApp.directive(&#39;myBtn&#39;,function(){            return {
                template:&#39;<input type="button" value="按钮" class="{{myClass}}">&#39;
            }
        });    </script></body></html>

Copy after login

Detailed explanation of the use of angulars scopel directive

##It’s really good to use a custom directive like the above, but if If you want to customize the buttons rendered by each command, it seems that it is not possible. For example, below we create a bunch of custom commands, and they look exactly the same:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .primary{            background: red;
        }    </style></head><body ng-app="myApp">
    <div ng-controller="mainCtrl">
        <my-btn></my-btn>
        <my-btn></my-btn>
        <my-btn></my-btn>
        <my-btn></my-btn>
    </div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.controller(&#39;mainCtrl&#39;,[&#39;$scope&#39;,function($scope){
            $scope.myClass = &#39;primary&#39;;
        }]);
        myApp.directive(&#39;myBtn&#39;,function(){            return {
                template:&#39;<input type="button" value="按钮" class="{{myClass}}">&#39;
            }
        });    </script></body></html>

Copy after login

Detailed explanation of the use of angulars scopel directive ##One idea is to put these custom command buttons in different controllers, and then pass different values through the $scope context in the controller:

  <!DOCTYPE html><html><head>
   <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .primary{            background: red;
        }        .success{            background: green;
        }        .default{            background: gray;
        }    </style></head><body ng-app="myApp">
    <div ng-controller="aCtrl">
        <my-btn></my-btn>
    </div>
    <div ng-controller="bCtrl">
        <my-btn></my-btn>
    </div>
    <div ng-controller="cCtrl">
        <my-btn></my-btn>
    </div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.controller(&#39;aCtrl&#39;,[&#39;$scope&#39;,function($scope){
            $scope.myClass = &#39;primary&#39;;
        }]);
        myApp.controller(&#39;bCtrl&#39;,[&#39;$scope&#39;,function($scope){
            $scope.myClass = &#39;success&#39;;
        }]);
        myApp.controller(&#39;cCtrl&#39;,[&#39;$scope&#39;,function($scope){
            $scope.myClass = &#39;default&#39;;
        }]);
        myApp.directive(&#39;myBtn&#39;,function(){            return {
                template:&#39;<input type="button" value="按钮" class="{{myClass}}">&#39;
            }
        });    </script></body></html>

Copy after login

Detailed explanation of the use of angulars scopel directive It’s too troublesome to write like this, so our angular provides a configuration item called scope for our custom instructions, so we can write it like this:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .primary{            background: red;
        }        .success{            background: green;
        }        .default{            background: gray;
        }    </style></head><body ng-app="myApp">
    <div ng-controller="Controller">
      <my-btn b="className1"></my-btn>
      <my-btn b="className2"></my-btn>
      <my-btn b="className3"></my-btn>
    </div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        
        myApp
        .controller(&#39;Controller&#39;, [&#39;$scope&#39;, function($scope) {
          $scope.className1 = &#39;primary&#39;;
          $scope.className2 = &#39;success&#39;;
          $scope.className3 = &#39;default&#39;;
        }])
        .directive(&#39;myBtn&#39;,function(){            return {
                scope:{
                    a:&#39;=b&#39;
                },
                template:&#39;<input type="button" value="按钮" class="{{a}}">&#39;
            }
        });    </script></body></html>

Copy after login

To understand the above, just pay attention to two points:

The a in the independent scope here represents the model a in the template

=b represents that Angular needs to find the view. The attribute b of the current directive

The value of attribute b needs to be found in the external scope

If you want to bind the name of the model in the directive scope and the attributes when used externally The names are the same and can be written as follows:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .primary{            background: red;
        }        .success{            background: green;
        }        .default{            background: gray;
        }    </style></head><body ng-app="myApp">
    <div ng-controller="Controller">
      <my-btn a="className1"></my-btn>
      <my-btn a="className2"></my-btn>
      <my-btn a="className3"></my-btn>
    </div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        
        myApp
        .controller(&#39;Controller&#39;, [&#39;$scope&#39;, function($scope) {
          $scope.className1 = &#39;primary&#39;;
          $scope.className2 = &#39;success&#39;;
          $scope.className3 = &#39;default&#39;;
        }])
        .directive(&#39;myBtn&#39;,function(){            return {
                scope:{
                    a:&#39;=&#39;
                },
                template:&#39;<input type="button" value="按钮" class="{{a}}">&#39;
            }
        });    </script></body></html>

Copy after login

Of course, the = sign above is two-way data binding:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .primary{            background: red;
        }        .success{            background: green;
        }        .default{            background: gray;
        }    </style></head><body ng-app="myApp">
    <div ng-controller="Controller">
      <my-btn a="abc"></my-btn>
    </div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        
        myApp
        .controller(&#39;Controller&#39;, [&#39;$scope&#39;, function($scope) {
          $scope.abc = &#39;我是初始内容&#39;;
        }])
        .directive(&#39;myBtn&#39;,function(){            return {
                scope:{
                    a:&#39;=&#39;
                },
                template:&#39;<input type="text"  ng-model="a"><span>{{a}}</span>&#39;
            }
        });    </script></body></html>

Copy after login

If you only want one-way data communication, you can use the @ symbol:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .primary{            background: red;
        }        .success{            background: red;
        }        .default{            background: red;
        }    </style></head><body ng-app="myApp">
    <div ng-controller="Controller">
      <my-btn a="primary"></my-btn>
    </div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        
        myApp
        .controller(&#39;Controller&#39;, [&#39;$scope&#39;, function($scope) {
          $scope.mm = &#39;primary&#39;;
        }])
        .directive(&#39;myBtn&#39;,function(){            return {
                scope:{
                    a:&#39;@&#39;
                },
                template:&#39;<input type="button" value="按钮" class="{{a}}">&#39;
            }
        });    </script></body></html>

Copy after login

If you want to use ng-class, you can do it:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .primary{            background: red;
        }        .success{            background: red;
        }        .default{            background: red;
        }    </style></head><body ng-app="myApp">
    <div ng-controller="Controller">
      <my-btn a="primary"></my-btn>
    </div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        
        myApp
        .controller(&#39;Controller&#39;, [&#39;$scope&#39;, function($scope) {
          $scope.mm = true;
        }])
        .directive(&#39;myBtn&#39;,function(){            return {
                scope:{
                    a:&#39;@&#39;
                },
                template:&#39;<input type="button" value="按钮" ng-class="{primary:a}">&#39;
            }
        });    </script></body></html>

Copy after login

Finally, there is a scope that can be set to refer to the external scope method

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .primary{            background: red;
        }        .success{            background: red;
        }        .default{            background: red;
        }    </style></head><body ng-app="myApp">
    <div ng-controller="Controller">
      <my-btn fn2="fn()"></my-btn>
    </div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        
        myApp
        .controller(&#39;Controller&#39;, [&#39;$scope&#39;, function($scope) {
          $scope.fn = function(){
            alert(11);
          }
        }])
        .directive(&#39;myBtn&#39;,function(){            return {
                scope:{
                    fn1:&#39;&fn2&#39;
                },
                template:&#39;<input type="button" value="按钮" ng-click="fn1()">&#39;
            }
        });    </script></body></html>

Copy after login

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