这里有新鲜出炉的 AngularJS 教程,程序狗速度看过来!
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
这篇文章主要介绍了 AngularJS 中 directive 指令使用之事件绑定与指令交互用法, 结合实例形式分析了 directive 指令在模板的使用,事件的绑定及元素、属性、控制器之间的交互相关操作技巧, 需要的朋友可以参考下
本文实例讲述了 AngularJS 中 directive 指令使用之事件绑定与指令交互用法。分享给大家供大家参考,具体如下:
AngularJS 中模板的使用,事件绑定以及指令与指令之间的交互
- <!doctype html>
- <html ng-app="myapp">
- <head>
- <meta charset="utf-8" />
- </head>
- <body ng-controller="ShieldController">
- <div>
- <who>
- </who>
- </div>
- <div>
- <button you-btn>
- </button>
- </div>
- <theshield reigns>
- 343
- </theshield>
- <theshield reigns>
- fdhg
- </theshield>
- <theshield rollins>
- hhh
- </theshield>
- <theshield ambros>
- kkk
- </theshield>
- </body>
- <script src="./js/angular.min.js">
- </script>
- <script>
- var app = angular.module('myapp', []);
- /*=======================1. 模板的使用 ========================*/
- app.directive('who',
- function() {
- return {
- restrict: "E",
- //元素element 的意思
- link: function(scope, element, attrs) {
- console.log(element);
- element[0].innerHTML = 'sdfhkj'; //这个优先级别最高
- },
- //templateUrl:"param.html", //这个不显示 优先级别最低
- template: "<h1>jkdhf</h1>" //这个显示 优先级别其次
- };
- });
- /*=======================2. 事件的绑定 ========================*/
- app.directive('youBtn',
- function() {
- return {
- restrict: "A",
- //attribute 属性的意思
- link: function(scope, element, attrs) {
- console.log(element);
- element[0].innerHTML = 'my btn';
- //事件绑定
- element.bind('mouseenter',
- function() {
- element[0].innerHTML = 'your btn';
- });
- element.bind('mouseleave',
- function() {
- element[0].innerHTML = 'her btn';
- });
- }
- };
- });
- /*=======================3. 元素 属性 控制器之间的交互========================*/
- app.controller('ShieldController',
- function($scope) {
- $scope.shieldNames = [];
- this.addReigns = function() {
- $scope.shieldNames.push("reigns:jjj");
- }
- this.addRollins = function() {
- $scope.shieldNames.push("Rollins:hhh");
- }
- this.addAmbros = function() {
- $scope.shieldNames.push("Ambros:ggg");
- }
- }).directive('reigns',
- function() {
- return {
- require: "theshield",
- link: function(scope, element, attrs, ShieldController) {
- ShieldController.addReigns();
- }
- };
- }).directive('rollins',
- function() {
- return {
- require: "theshield",
- link: function(scope, element, attrs, ShieldController) {
- ShieldController.addRollins();
- }
- };
- }).directive('ambros',
- function() {
- return {
- require: "theshield",
- link: function(scope, element, attrs, ShieldController) {
- ShieldController.addAmbros();
- }
- };
- }).directive('theshield',
- function() {
- return {
- restrict: "E",
- controller: "ShieldController",
- //指定控制器
- scope: {},
- //清空该指令处的$scope 值
- link: function(scope, element, attrs) {
- element.bind('mouseenter',
- function() { //对于该指令所对应的元素绑定对应的事件
- console.log(scope.shieldNames);
- });
- }
- };
- });
- </script>
- </html>
希望本文所述对大家 AngularJS 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0504/330295.html