简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

angular的scopel指令使用详解

php中世界最好的语言
发布： 2018-03-12 16:59:04
原创
1604 人浏览过

这次给大家带来angular的scopel指令使用详解，使用angular的scopel指令注意事项有哪些，下面就是实战案例，一起来看一下。

我们来创建一个自定义指令

<!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>
登录后复制


1.png

使用自定义指令像上面一样的确不错，但是如果你想要对每一个指令渲染出来的按钮定制化，则好像不可以，比如下面我们创建一堆这个自定义指令，他们长得一模一样：

<!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>
登录后复制


2.png

一种思路是把这几个自定义的指令按钮放到不同的控制器里面，然后控制器里通过$scope上下文传递不同的值：


  <!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>
登录后复制

3.png

这样写太麻烦了，所以我们的angular为我们的自定义指令提供了一个配置项叫scope,所以，我们可以如下这样写：

<!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>
登录后复制

要看懂上面的只要注意两点：

这里的独立作用域里面的a代表的是template里面的模型a

=b代表的是要angular去寻找视图里面的当前指令的属性b

属性b的值需要去外部作用域里面去寻找

如果你想在指令作用域里绑定的模型的名字和外部使用的时候的属性名一样，可以省写成如下：

<!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>
登录后复制

当然，上面的=号是双向数据绑定：

<!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>
登录后复制

如果只是想单向的数据通信，可以用@符号：

<!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>
登录后复制

如果想用ng-class，也是可以的：

<!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>
登录后复制

最后，还有一个scope可以设置是引用外部作用域的方法

<!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>
登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Angular Material的使用详解

css中id选择器的命名规则有哪些

让元素水平垂直居中冷门方法

以上是angular的scopel指令使用详解的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
angular 详解
来源：php.cn
上一篇：Angular Material的使用详解 下一篇： 网页的布局方式与浮动
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
Angular 7 去除 SCSS 中的重复属性 AngularSASS(.scss)剥离属性。如何防止这种情况发生，以便我可以嵌入重复的属性以实现跨浏览器兼容性？要复制，请创建一个新的Angular7.2项目{"nam...
来自于 2024-04-04 23:28:54
0
1
1382
Angular应用中导入Javascript原型构造函数时抛出错误 我有一个Angular应用程序，我试图在其中导入一个具有构造函数的JS文件。但是当我运行该应用程序时，webpack会抛出错误。资产中的Javascript文件：TestServi...
来自于 2024-04-04 11:36:15
0
1
288
使用 Ajax 生成内容 - 滚动到 Id 不起作用 我根据通过ajax获取的数据生成页面内容。我遇到的问题是，当我想滚动到某个ID时，滚动要么不会发生，要么滚动到错误的位置。我一直在查看SO问答，但没有找到任何好的解决方案。很多答案...
来自于 2024-04-04 09:29:39
0
1
397
在 Angular 中创建圆形 SVG 温度拖动器？ 这是我尝试在Angular中创建的圆形拇指拖动器的静态演示。它使用rinkle-dashoffset="-260"设置将拇指/拖动器定位在靠近拇指后面的圆形路径...
来自于 2024-04-03 09:33:29
0
1
376
Angular：了解文本元素颜色的属性绑定缺乏反应性 下面是我的.ts文件，import{Component}from'@angular/core';@Component({selector:'app-event-binding',t...
来自于 2024-04-01 17:28:52
0
1
358
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！