首页 > 资讯 > 前端开发 > html >angular的scopel指令如何使用

863

分享到

angular的scopel指令如何使用

2024-04-02 19:04:59 863人浏览八月长安

摘要

这篇文章主要介绍了angular的scopel指令如何使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇angular的scopel指令如何使用文章都会有所收获，下面我们一起来

这篇文章主要介绍了angular的scopel指令如何使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇angular的scopel指令如何使用文章都会有所收获，下面我们一起来看看吧。

使用代码如下：

　　<!DOCTYPEhtml><htmllang="en"><head>

　　<metacharset="UTF-8">

　　<title>Document</title>

　　<style>

　　.primary{background:red;

　　}</style></head><bodyng-app="myApp">

　　<divng-controller="mainCtrl">

　　<my-btn></my-btn>

　　</div>

　　<scriptsrc="node_modules/angular/angular.min.js"></script>

　　varmyApp=angular.module('myApp',[]);

　　myApp.controller('mainCtrl',['$scope',function($scope){

　　$scope.myClass='primary';

　　}]);

　　myApp.directive('myBtn',function(){return{

　　template:'<inputtype="button"value="按钮"class="{{myClass}}">'

　　}

　　});</script></body></html>

　　1.png

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

　　<!DOCTYPEhtml><htmllang="en"><head>

　　<metacharset="UTF-8">

　　<title>Document</title>

　　<style>

　　.primary{background:red;

　　}</style></head><bodyng-app="myApp">

　　<divng-controller="mainCtrl">

　　<my-btn></my-btn>

　　</div>

　　<scriptsrc="node_modules/angular/angular.min.js"></script>

　　varmyApp=angular.module('myApp',[]);

　　myApp.controller('mainCtrl',['$scope',function($scope){

　　$scope.myClass='primary';

　　}]);

　　myApp.directive('myBtn',function(){return{

　　template:'<inputtype="button"value="按钮"class="{{myClass}}">'

　　}

　　});</script></body></html>

　　2.png

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

　　<!DOCTYPEhtml><html><head>

　　<metacharset="UTF-8">

　　<title>Document</title>

　　<style>

　　.primary{background:red;

　　}.success{background:green;

　　}.default{background:gray;

　　}</style></head><bodyng-app="myApp">

　　<divng-controller="aCtrl">

　　<my-btn></my-btn>

　　</div>

　　<divng-controller="bCtrl">

　　<my-btn></my-btn>

　　</div>

　　<divng-controller="cCtrl">

　　<my-btn></my-btn>

　　</div>

　　<scriptsrc="node_modules/angular/angular.min.js"></script>

　　varmyApp=angular.module('myApp',[]);

　　myApp.controller('aCtrl',['$scope',function($scope){

　　$scope.myClass='primary';

　　}]);

　　myApp.controller('bCtrl',['$scope',function($scope){

　　$scope.myClass='success';

　　}]);

　　myApp.controller('cCtrl',['$scope',function($scope){

　　$scope.myClass='default';

　　}]);

　　myApp.directive('myBtn',function(){return{

　　template:'<inputtype="button"value="按钮"class="{{myClass}}">'

　　}

　　});</script></body></html>

　　3.png

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

　　<!DOCTYPEhtml><htmllang="en"><head>

　　<metacharset="UTF-8">

　　<title>Document</title>

　　<style>

　　.primary{background:red;

　　}.success{background:green;

　　}.default{background:gray;

　　}</style></head><bodyng-app="myApp">

　　<divng-controller="Controller">

　　<my-btnb="className1"></my-btn>

　　<my-btnb="className2"></my-btn>

　　<my-btnb="className3"></my-btn>

　　</div>

　　<scriptsrc="node_modules/angular/angular.min.js"></script>

　　varmyApp=angular.module('myApp',[]);

　　myApp

　　.controller('Controller',['$scope',function($scope){

　　$scope.className1='primary';

　　$scope.className2='success';

　　$scope.className3='default';

　　}])

　　.directive('myBtn',function(){return{

　　scope:{

　　a:'=b'

　　template:'<inputtype="button"value="按钮"class="{{a}}">'

　　}

　　});</script></body></html>

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

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

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

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

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

　　<!DOCTYPEhtml><htmllang="en"><head>

　　<metacharset="UTF-8">

　　<title>Document</title>

　　<style>

　　.primary{background:red;

　　}.success{background:green;

　　}.default{background:gray;

　　}</style></head><bodyng-app="myApp">

　　<divng-controller="Controller">

　　<my-btna="className1"></my-btn>

　　<my-btna="className2"></my-btn>

　　<my-btna="className3"></my-btn>

　　</div>

　　<scriptsrc="node_modules/angular/angular.min.js"></script>

　　varmyApp=angular.module('myApp',[]);

　　myApp

　　.controller('Controller',['$scope',function($scope){

　　$scope.className1='primary';

　　$scope.className2='success';

　　$scope.className3='default';

　　}])

　　.directive('myBtn',function(){return{

　　scope:{

　　a:'='

　　template:'<inputtype="button"value="按钮"class="{{a}}">'

　　}

　　});</script></body></html>

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

　　<!DOCTYPEhtml><htmllang="en"><head>

　　<metacharset="UTF-8">

　　<title>Document</title>

　　<style>

　　.primary{background:red;

　　}.success{background:green;

　　}.default{background:gray;

　　}</style></head><bodyng-app="myApp">

　　<divng-controller="Controller">

　　<my-btna="abc"></my-btn>

　　</div>

　　<scriptsrc="node_modules/angular/angular.min.js"></script>

　　varmyApp=angular.module('myApp',[]);

　　myApp

　　.controller('Controller',['$scope',function($scope){

　　$scope.abc='我是初始内容';

　　}])

　　.directive('myBtn',function(){return{

　　scope:{

　　a:'='

　　template:'<inputtype="text"ng-model="a"><span>{{a}}</span>'

　　}

　　});</script></body></html>

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

　　<!DOCTYPEhtml><htmllang="en"><head>

　　<metacharset="UTF-8">

　　<title>Document</title>

　　<style>

　　.primary{background:red;

　　}.success{background:red;

　　}.default{background:red;

　　}</style></head><bodyng-app="myApp">

　　<divng-controller="Controller">

　　<my-btna="primary"></my-btn>

　　</div>

　　<scriptsrc="node_modules/angular/angular.min.js"></script>

　　varmyApp=angular.module('myApp',[]);

　　myApp

　　.controller('Controller',['$scope',function($scope){

　　$scope.mm='primary';

　　}])

　　.directive('myBtn',function(){return{

　　scope:{

　　a:'@'

　　template:'<inputtype="button"value="按钮"class="{{a}}">'

　　}

　　});</script></body></html>

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

　　<!DOCTYPEhtml><htmllang="en"><head>

　　<metacharset="UTF-8">

　　<title>Document</title>

　　<style>

　　.primary{background:red;

　　}.success{background:red;

　　}.default{background:red;

　　}</style></head><bodyng-app="myApp">

　　<divng-controller="Controller">

　　<my-btna="primary"></my-btn>

　　</div>

　　<scriptsrc="node_modules/angular/angular.min.js"></script>

　　varmyApp=angular.module('myApp',[]);

　　myApp

　　.controller('Controller',['$scope',function($scope){

　　$scope.mm=true;

　　}])

　　.directive('myBtn',function(){return{

　　scope:{

　　a:'@'

　　template:'<inputtype="button"value="按钮"ng-class="{primary:a}">'

　　}

　　});</script></body></html>

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

　　<!DOCTYPEhtml><htmllang="en"><head>

　　<metacharset="UTF-8">

　　<title>Document</title>

　　<style>

　　.primary{background:red;

　　}.success{background:red;

　　}.default{background:red;

　　}</style></head><bodyng-app="myApp">

　　<divng-controller="Controller">

　　<my-btnfn2="fn()"></my-btn>

　　</div>

　　<scriptsrc="node_modules/angular/angular.min.js"></script>

　　varmyApp=angular.module('myApp',[]);

　　myApp

　　.controller('Controller',['$scope',function($scope){

　　$scope.fn=function(){

　　alert(11);

　　}

　　}])

　　.directive('myBtn',function(){return{

　　scope:{

　　fn1:'&fn2'

　　template:'<inputtype="button"value="按钮"ng-click="fn1()">'

　　}

　　});</script></body></html>

关于“angular的scopel指令如何使用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“angular的scopel指令如何使用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网html频道。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: angular的scopel指令如何使用

本文链接: https://www.lsjlt.com/news/93751.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

angular的scopel指令如何使用

这篇文章主要介绍了angular的scopel指令如何使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇angular的scopel指令如何使用文章都会有所收获，下面我们一起来...

99+

2024-04-02
Angular的结构指令如何使用

这篇文章主要介绍“Angular的结构指令如何使用”，在日常操作中，相信很多人在Angular的结构指令如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Angular的...

99+

2024-04-02
Angular的Directive指令怎么使用

这篇文章主要介绍“Angular的Directive指令怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Angular的Directive指令怎么使用”文章能帮助大家解决问题。Directiv...

99+

2023-07-04
Angular中如何自定义创建指令

小编给大家分享一下Angular中如何自定义创建指令，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！指令介绍在 Angular 中有三种类型的指令：组件，有模板的指...

99+

2023-06-14
如何利用Angular指令保持关注点分离

这篇文章将为大家详细讲解有关如何利用Angular指令保持关注点分离，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。假设在我们的应用程序中有一个日期选择器组件。用户每次更改...

99+

2024-04-02
Angular中的结构指令模式及使用详解

目录你将学到什么Angular 结构指令是什么？Angular 结构指令是怎么工作的？结构指令的例子怎么使用 *ngIf 指令怎么使用 *ngFor 指令怎么使用 *ngSwitch...

99+

2024-04-02
Angular中如何自定义结构型指令和属性型指令

今天小编给大家分享一下Angular中如何自定义结构型指令和属性型指令的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。一、自定...

99+

2023-07-05
angular指令和管道怎么用

本篇内容主要讲解“angular指令和管道怎么用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“angular指令和管道怎么用”吧!指令 Directive指令是...

99+

2024-04-02
如何使用go:linkname指令

这篇文章主要介绍“如何使用go:linkname指令”，在日常操作中，相信很多人在如何使用go:linkname指令问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何使用go:linkname指令”的疑惑有所...

99+

2023-06-15
Vue指令如何使用

这篇“Vue指令如何使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue指令如何使用”文章吧。一、基本使用官网案例：&l...

99+

2023-07-04
Linux的curl指令如何使用

这篇文章主要介绍“Linux的curl指令如何使用”，在日常操作中，相信很多人在Linux的curl指令如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Linux的curl指令如何使用”的疑惑有所帮助！...

99+

2023-07-05
如何使用AngularJS2中的指令

这篇文章主要介绍如何使用AngularJS2中的指令，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！这次我们使用Angular2的指令来实现。指令实现hover效果import&nbs...

99+

2024-04-02
JSP的include指令如何使用

JSP的include指令用于将一个JSP页面包含到另一个JSP页面中。使用include指令可以实现代码的重用和模块化。下面是in...

99+

2023-08-12

JSP include
redis如何使用scan指令代替keys指令

这篇文章主要为大家展示了“redis如何使用scan指令代替keys指令”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“redis如何使用scan指令代替keys...

99+

2024-04-02
如何使用v-model指令

这篇文章主要介绍“如何使用v-model指令”，在日常操作中，相信很多人在如何使用v-model指令问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何使用v-model指令”...

99+

2024-04-02
angular如何使用$apply

这篇文章主要介绍了angular如何使用$apply，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。有的时候在回调里面写了更新scope的里面...

99+

2024-04-02
如何理解Angular中的指令和管道以及服务

这篇文章将为大家详细讲解有关如何理解Angular中的指令和管道以及服务，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。1. 指令 Directive指令是 ...

99+

2024-04-02
Angular如何实现多选复选框的弹出框指令

这篇文章将为大家详细讲解有关Angular如何实现多选复选框的弹出框指令，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。要实现一个包含多个复选框的下拉框该如何做呢？先上个效...

99+

2024-04-02
C#中using指令如何使用

C#中using指令如何使用，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。1.using指令。using + 命名空间名字，这样可以在程序中直接用命令空间中的类型，而不必指...

99+

2023-06-17
C++ 中如何使用cpuid指令

这篇文章将为大家详细讲解有关C++ 中如何使用cpuid指令，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。1、什么是C++ cpuid指令CPUID指令是intel IA32架构下获得CPU...

99+

2023-06-17