angularJS自定义属性作为条件中转

<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body ng-app="components">
<div ng-controller="c1">
    <myelement alert="loadData1()">
        <h1>哈哈</h1>
    </myelement>
</div>
<div ng-controller="c2">
    <myelement alert="loadData2()">
        <h1>吼吼</h1>
    </myelement>
</div>
</body>
<script src="angular.js"></script>
<script>
    var app= angular.module(‘components‘, []);
    app.controller("c1",function($scope){
        $scope.loadData1=function(){
            alert("哈哈");
        }
    });

    app.controller("c2",function($scope){
        $scope.loadData2=function(){
            alert("吼吼");
        }
    });

    app.directive("myelement",function(){
        return {
            link:function(scope, element, attr, superCtrl){
                element.bind("click",function(){
                    scope.$apply(attr.alert);//在这里注意下如果自定义属性使用驼峰命名法,那么attr调用该属性时仍然要保证完全小写
                });
            }
        }
    });
</script>
</html>
时间: 2024-08-02 11:44:35

angularJS自定义属性作为条件中转的相关文章

AngularJS进阶 七 实现根据不同条件显示不同控件

AngularJS实现根据不同条件显示不同控件 由于项目需求,需要实现根据不同条件显示不同控件的功能.具体要求如下图所示: 即当选择"每单固定减"时,下方只显示"减免金额"一栏: 当选择"每单固定折扣"时,下方只显示"折扣比例"一栏: 当选择"每单满额减"时,下方只显示"满..减.."两栏. 根据自己对angular的了解,应该可以很轻松的实现此功能. js设置控件的隐藏与显示,设置控件

angularjs 选项卡 --- 自定义属性

<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> #div1 { position:absolute; left: 0; top: 0; width:150px; height:150px;

AngularJs我的学习整理(不定时修改)

最近一月份的日子,学习了AngularJs,还只是刚刚入门而已.了解了基本的语法规则以及很简单的应用.仔细想想,学习AngularJs的时间大概半个月的时间,每天花在AngularJs上两三个小时. 在短短的学习入门时间,也想简简单单地做一个阶段性的总结.下一次的学习应该是进阶.计划准备在NodeJs入门之后进阶AngularJs和NodeJs. AngularJs是什么东东? AngularJS 使得开发现代的单一页面应用程序变得更加容易(单一页面应用程序SPAs:Single Page Ap

走进AngularJs(一)angular基本概念的认识与实战

一.前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,作为一名业界新秀,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.当听到AngularJs这个名字并知道是google在维护它时,便一直在关注,看到其在国外已经十分火热,可是国内的使用情况却有不小的差距,参考文献/网络文章也很匮乏.朝思暮想良久,决定深入学习angular,并写系列博客,一方面作为自己学习路程上的记录,另一方面也给有兴趣的同学一些参考. 首先我自己是一名学习者,会以学习者的角度来整理我的行文思路,故该系

angularjs学习总结 详细教程(转载)

1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的使用情况却有不小的差距,参考文献/网络文章也很匮乏.这里便将我学习AngularJS写成文档,一方面作为自己学习路程上的记录,另一方面也给有兴趣的同学一些参考. 首先我自己也是一名学习者,会以学习者的角度来整理我的行文思路,这里可能只是些探索,有理解或是技术上的错误还请大家指出:其次我特别喜欢编写小

AngularJS理论基础

AngularJS理论基础 AngularJs是一个用于设计动态web应用的结构框架. 它是一个框架,不是类库,是像EXT一样提供一整套方案用于设计web应用.它不仅仅是一个javascript框架,因为它的核心其实是对HTML标签的增强.使你能够用标签完成一部分页面逻辑,具体方式就是通过自定义标签.自定义属性等,这些HTML原生没有的标签/属性在ng中有一个名字:指令(directive).web应用能为用户提供丰富的操作,能够随用户操作不断更新视图而不进行url跳转.ng官方也声明它更适用于

angularjs(一)基础概念

一.前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,作为一名业界新秀,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.当听到AngularJs这个名字并知道是google在维护它时,便一直在关注,看到其在国外已经十分火热,可是国内的使用情况却有不小的差距,参考文献/网络文章也很匮乏.朝思暮想良久,决定深入学习angular,并写系列博客,一方面作为自己学习路程上的记录,另一方面也给有兴趣的同学一些参考. 首先我自己是一名学习者,会以学习者的角度来整理我的行文思路,故该系

AngularJS开发指南5:AngularJS表达式详解

AngularJS表达式类似Javascript的代码片段,通常在数据绑定中用到,写在双大括号中,如:{{表达式}}.表达式是用$parse方法来处理的. 下面是一些合法的AngularJS表达式 1+2 3*10 | currency user.name 你可能会认为AngularJS视图中的表达式就是Javascript表达式,这种认识不完全对,因为AngularJS不会用Javascript的eval()函数去执行表达式. 不过除了以下几个需要区别的地方以外,你可以把AngularJS表达

转: angularjs学习总结(~~很详细的教程)

1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的使用情况却有不小的差距,参考文献/网络文章也很匮乏.这里便将我学习AngularJS写成文档,一方面作为自己学习路程上的记录,另一方面也给有兴趣的同学一些参考. 首先我自己也是一名学习者,会以学习者的角度来整理我的行文思路,这里可能只是些探索,有理解或是技术上的错误还请大家指出:其次我特别喜欢编写小