本实例主要展示怎样用directives实现buttons radio。
AngularButtonDirective.html
<!doctype html> <html lang="en" ng-app="BJButtionDirective"> <head> <script src="lib/jquery-1.9.1.js"></script> <script src="lib/angular.js"></script> <script type="text/javascript" src="js/buttons-radio-controller.js"></script> </head> <body ng-controller="MainCtrl"> <div class="container"> <div class="span6"> <br> <strong>myModel: </strong> <code> {{myModel}} </code> <hr> <div> <input name="test" type="radio" ng-model="myModel" value="Left"> Left<br> <input name="test" type="radio" ng-model="myModel" value="Middle"> Middle<br> <input name="test" type="radio" ng-model="myModel" value="Right"> Right<br> </div> <hr> <buttons-radio class="btn-group" data-toggle="buttons-radio" model='myModel' options='myOptions'></buttons-radio> </div> </div> </body> </html>
buttons-radio-controller.js
'use strict'; function MainCtrl($scope) { $scope.myOptions = ['Left', 'Middle', 'Right']; $scope.myModel = 'Left'; $scope.$watch('myModel', function(v){ console.log('changed', v); }); } angular.module('BJButtionDirective', []).directive('buttonsRadio', function() { return { restrict: 'E', scope: { model: '=', options:'=' }, controller: function($scope){ $scope.activate = function(option){ $scope.model = option; }; }, template: "<button type='button' class='btn' "+ "ng-class='{active: option == model}'"+ "ng-repeat='option in options' "+ "ng-click='activate(option)'>{{option}} "+ "</button>" }; });
运行效果:
点击单选项,模型发生改变
点击指令写的buttons radio,效果一样
控制台输出信息如下:
实际我们在开发过程中,在指令中一般用link,即buttons-radio-controller.js内容如下:
'use strict'; function MainCtrl($scope) { $scope.myOptions = ['Left', 'Middle', 'Right']; $scope.myModel = 'Left'; $scope.$watch('myModel', function(v){ console.log('changed', v); }); } angular.module('BJButtionDirective', []).directive('buttonsRadio', function() { return { restrict: 'E', scope: { model: '=', options:'=' }, link: function(scope, el, attrs){ scope.activate = function(option){ scope.model = option; }; }, template: "<button type='button' class='btn' "+ "ng-class='{active: option == model}'"+ "ng-repeat='option in options' "+ "ng-click='activate(option)'>{{option}} "+ "</button>" }; });
对buttonsRadio directives的解释:
restrict:代码中我们使用了"E"属性,表示创建此directive将创建一个element
scope:一般用于从controller中获取$scope中的一些值或进行数据的通信
a.'='表示指向同一个引用,即指令中对模型的改变,会直接改变到指令外面同模型
b.‘@表示使用此指令时,使用的地方向指令中传递值给指令,它是单向的,只支持String
c.事件通知,指令通知外面
当然,上面指令在兼容IE8和IE8以下的版本中不能正常运行,需修改元素标签指令为属性标签,如下所示:
AngularButtonDirective.html
<!doctype html> <html lang="en" ng-app="BJButtionDirective"> <head> <script src="lib/jquery-1.9.1.js"></script> <script src="lib/angular.js"></script> <script type="text/javascript" src="js/buttons-radio-controller.js"></script> </head> <body ng-controller="MainCtrl"> <div class="container"> <div class="span6"> <br> <strong>myModel: </strong> <code> {{myModel}} </code> <hr> <div> <input name="test" type="radio" ng-model="myModel" value="Left"> Left<br> <input name="test" type="radio" ng-model="myModel" value="Middle"> Middle<br> <input name="test" type="radio" ng-model="myModel" value="Right"> Right<br> </div> <hr> <span buttons-radio="" class="btn-group" data-toggle="buttons-radio" model='myModel' options='myOptions'></span> </div> </div> </body> </html>
buttons-radio-controller.js
'use strict'; function MainCtrl($scope) { $scope.myOptions = ['Left', 'Middle', 'Right']; $scope.myModel = 'Left'; $scope.$watch('myModel', function(v){ console.log('changed', v); }); } angular.module('BJButtionDirective', []).directive('buttonsRadio', function() { return { restrict: 'A', scope: { model: '=', options:'=' }, link: function(scope, el, attrs){ scope.activate = function(option){ scope.model = option; }; }, template: "<button type='button' class='btn' "+ "ng-class='{active: option == model}'"+ "ng-repeat='option in options' "+ "ng-click='activate(option)'>{{option}} "+ "</button>" }; });
相关推荐
基于java的贝儿米幼儿教育管理系统答辩PPT.pptx
本压缩包资源说明,你现在往下拉可以看到压缩包内容目录 我是批量上传的基于SpringBoot+Vue的项目,所以描述都一样;有源码有数据库脚本,系统都是测试过可运行的,看文件名即可区分项目~ |Java|SpringBoot|Vue|前后端分离| 开发语言:Java 框架:SpringBoot,Vue JDK版本:JDK1.8 数据库:MySQL 5.7+(推荐5.7,8.0也可以) 数据库工具:Navicat 开发软件: idea/eclipse(推荐idea) Maven包:Maven3.3.9+ 系统环境:Windows/Mac
基于java的消防物资存储系统答辩PPT.pptx
项目经过测试均可完美运行! 环境说明: 开发语言:java jdk:jdk1.8 数据库:mysql 5.7+ 数据库工具:Navicat11+ 管理工具:maven 开发工具:idea/eclipse
项目经过测试均可完美运行! 环境说明: 开发语言:java jdk:jdk1.8 数据库:mysql 5.7+ 数据库工具:Navicat11+ 管理工具:maven 开发工具:idea/eclipse
TA_lib库(whl轮子),直接pip install安装即可,下载即用,非常方便,各个python版本对应的都有。 使用方法: 1、下载下来解压; 2、确保有python环境,命令行进入终端,cd到whl存放的目录,直接输入pip install TA_lib-xxxx.whl就可以安装,等待安装成功,即可使用! 优点:无需C++环境编译,下载即用,方便
使用软件自带的basic脚本编辑制作的脚本 低版本软件无法输出Excel报告,可以通过脚本方式实现这一功能
基于java的就业信息管理系统答辩PPT.pptx
25法理学背诵逻辑.apk.1g
基于java的大学生校园兼职系统答辩PPT.pptx
做到代码,和分析的源数据
本压缩包资源说明,你现在往下拉可以看到压缩包内容目录 我是批量上传的基于SpringBoot+Vue的项目,所以描述都一样;有源码有数据库脚本,系统都是测试过可运行的,看文件名即可区分项目~ |Java|SpringBoot|Vue|前后端分离| 开发语言:Java 框架:SpringBoot,Vue JDK版本:JDK1.8 数据库:MySQL 5.7+(推荐5.7,8.0也可以) 数据库工具:Navicat 开发软件: idea/eclipse(推荐idea) Maven包:Maven3.3.9+ 系统环境:Windows/Mac
项目经过测试均可完美运行! 环境说明: 开发语言:java jdk:jdk1.8 数据库:mysql 5.7+ 数据库工具:Navicat11+ 管理工具:maven 开发工具:idea/eclipse
适用于ensp已经入门人群的学习,有一定难度
基于java的数码论坛系统设计与实现答辩PPT.pptx
tornado-6.4.1-cp38-abi3-macosx_10_9_universal2.whl
基于java的医院信管系统答辩PPT.pptx
项目经过测试均可完美运行! 环境说明: 开发语言:java jdk:jdk1.8 数据库:mysql 5.7+ 数据库工具:Navicat11+ 管理工具:maven 开发工具:idea/eclipse
tornado-4.2.tar.gz
链表 合并两个链表,链表基础操作