angularjs实战
1.指令 transclude 保留原来的内容 replace 去掉<my-directive>指令
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <div ng-app="a"> <my-directive><div>这是原来的<p>this is p</p></div></my-directive> </div> <script> var app = angular.module('a', []); app.directive('myDirective', function () { return{ template:'<div>this is directive<div ng-transclude=""></div></div>', transclude:true, replace:true } }); </script>
2.指令绑定函数
<body ng-app="a"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <div ng-controller="ctrl1"> <my-directive>鼠标移上来</my-directive> </div> <!--指令绑定函数 ,借助 link --> <script> var app = angular.module('a', []); app.controller('ctrl1', function ($scope) { $scope.load= function () { console.log("loading.."); } }) app.directive('myDirective', function () { return{ link: function (scope,element,attrs) { element.bind('mouseover', function () { // scope.load(); scope.$apply("load()"); // 两种方式 }) } } }); </script>
3.指令复用,绑定不同函数
<body ng-app="a"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <div ng-controller="ctrl1"> <my-directive howToLoad="load()">鼠标移上来1</my-directive> </div> <div ng-controller="ctrl2"> <my-directive howToLoad="load2()">鼠标移上来2</my-directive> </div> <!--指令复用,绑定不同函数 ,要添加不同属性 howToLoad --> <script> var app = angular.module('a', []); app.controller('ctrl1', function ($scope) { $scope.load= function () { console.log("loading.."); } }) app.controller('ctrl2', function ($scope) { $scope.load2= function () { console.log("loading.22."); } }) app.directive('myDirective', function () { return{ link: function (scope,element,attrs) { element.bind('mouseover', function () { scope.$apply(attrs.howtoload); }) } } }); </script>
4.独立指令 $scope:{} 使每个复用的hello指令不受影响,在第一个hello输入值时,第二个hello不受影响
<body ng-app="a"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <hello></hello><br/> <hello></hello> <script> var app = angular.module('a', []); app.directive('hello', function () { return{ template:'<input type="text" ng-model="name">{{name}}', scope:{} } }) </script>
5.指令scope @
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 隔离作用域中把 myText同dom中的your-text属性绑定 <div ng-app="a"> <hello url="http://www.baidu.com" your-text="sohu"></hello> </div> <script> var app=angular.module('a',[]); app.directive('hello', function () { return{ template:'<div><a href="{{url}}">{{myText}}</a></div>', replace:true, scope:{ myText:'@yourText', url:'@' } } }) </script>
angularjs实战的更多相关文章
- AngularJS实战之Controller之间的通信
我们时常会在不同controller之间进行通信,接下来就介绍三种controller之间的通信方式 一.使用$on.$emit和$broadcast进行controller通信 虽然AngularJ ...
- AngularJS实战项目(Ⅰ)--含源码
前言 钻研ABP框架的日子,遇到了很多新的知识,因为对自己而言是新知识,所以经常卡在很多地方,迟迟不能有所突破,作为一个稍有上进心的程序员,内心绝对是不服输的,也绝对是不畏困难的,心底必然有这样一股力 ...
- AngularJs学习笔记-慕课网AngularJS实战
第1章 快速上手 放弃了IE8以及以下,不支持. 4大核心特性: 1.MVC Model: 数据模型 View:视图 Controller:业务逻辑和控制逻辑 好处:职责清晰,模块化. 2.模块化 3 ...
- AngularJS 实战讲义笔记
第一部分 快速上手 1.1 感受AngularJs四大核心特性(MVC, 模块化,指令系统,双向数据绑定)1.2 搭建自动化的前端开发,调试,测试环境 代码编辑工具 (sublime) 断点调试工具 ...
- [置顶] AngularJS实战之路由ui-sref-active使用
当我们使用angularjs的路由时,时常会出现一个需求,当选中菜单时把当前菜单的样式设置为选中状态(多数就是改变颜色) 接下来就看看Angular-UI-Router里的指令ui-sref-acti ...
- 《AngularJs实战》学习笔记(慕课网)
1. Controller使用过程中的注意点 不要试图去复用Controller, 一个控制器一般只负责一小块视图 不要在Controller中操作DOM, 这不是控制器的职责. 封装在指令里. 不要 ...
- angularJS实战(一)
angular实现列表 accessCtrl.js let AccessCtrl = function($scope, AlertService, DialogService, BigDataServ ...
- AngularJS实战之cookie的读取
<!DOCTYPE html> <html ng-controller="cookies_controller"> <head> <tit ...
- AngularJS实战之ngAnimate插件实现轮播
第一步:引入angular-animate.js 第二步:注入ngAnimate var lxApp = angular.module("lxApp", [ 'ngAnimate' ...
随机推荐
- PyQt4软件打包成exe文件
使用py2exe进行打包 例: from distutils.core import setupimport py2exeimport sys sys.argv.append('py2exe') py ...
- mkdir:批量创建文件夹
问题:mkdir dir[0-9]创建文件夹时,并没有如预期创建dir0~dir9这几个文件夹,而是创建了dir[0-9]这一个文件夹. 网上看了些相关资料,发现以前对[0-9]的理解不够透彻: &q ...
- host位置
windows xp/2003/vista/2008用户HOSTS文件是在“c:\windows\system32\drivers\etc”
- 【leetcode】Wildcard Matching
Wildcard Matching Implement wildcard pattern matching with support for '?' and '*'. '?' Matches any ...
- redis 异常解决办法
redis 异常解决办法 26069:M 08 Aug 17:06:58.858 # WARNING: The TCP backlog setting of 511 cannot be enforce ...
- 一名Delphi程序员的开发习惯
一名Delphi程序员的开发习惯 有关开发习惯的一些想法,如鲠在喉,不吐不快.究其发贴动机,当然不排除有骗取参与分的可能,但另一方面,也希望能给同行(念Xing)者提供一些 建议,或者参考(希望不是误 ...
- Java for LeetCode 206 Reverse Linked List
Reverse a singly linked list. 解题思路: 用Stack实现,JAVA实现如下: public ListNode reverseList(ListNode head) { ...
- 【leetcode】Course Schedule(middle)☆
There are a total of n courses you have to take, labeled from 0 to n - 1. Some courses may have prer ...
- java调用cmd命令删除文件夹及其所有内容
/** * *删除D盘下面test目录,感觉以前用io流遍历删除好慢! * **/ public static void main(String[] args) { Runtime run = Run ...
- PHP如何随机获取一个二维数组中的一个值
获取一个数组: $awardid_list=pdo_fetchall('select id from '.tablename($this->table_award)); 这是微擎的写法哈,意思就 ...