AngularJS Directive指令
来源：互联网 发布：java 积分兑换商城 编辑：程序博客网 时间：2024/06/05 13:26
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>AngularJS 指令</title> <script src="../js/jquery-2.1.3.min.js"></script> <script src="../js/angular.min.js"></script></head><body> <!-- ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。 {{ firstName }} 是通过 ng-model="firstName" 进行同步。 ng-app 指令定义了 AngularJS 应用程序的 根元素。 ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。 稍后您将学习到 ng-app 如何通过一个值（比如 ng-app="myModule"）连接到代码模块。 ng-init 指令为 AngularJS 应用程序定义了 初始值。 通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。 --> <!--<div ng-app="" ng-init="firstName='Json'"> <p>在输入框中尝试输入：</p> <p>姓名：<input type="text" ng-model="firstName"></p> <p>你输入的为： {{ firstName }}</p> </div>--> <!-- 在下一个实例中，两个文本域是通过两个 ng-model 指令同步的： ng-model 指令 绑定 HTML 元素 到应用程序数据。 ng-model 指令也可以： 为应用程序数据提供类型验证（number、email、required）。 为应用程序数据提供状态（invalid、dirty、touched、error）。 为 HTML 元素提供 CSS 类。 绑定 HTML 元素到 HTML 表单。 --> <!--<div ng-app="" ng-init="quantity=1;price=5"> <h2>价格计算器</h2> <p>数量：<input type="text" ng-model="quantity"></p> <p>价格：<input type="text" ng-model="price"></p> <p><b>总价：</b>{{quantity * price}}</p> </div>--> <!-- ng-repeat 指令会重复一个 HTML 元素： ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素 --> <!--<div ng-app="" ng-init="names=['Json', 'Lucy', 'Andy', 'Kite']"> <p>使用 ng-repeat 来循环数组</p> <ul> <li ng-repeat="name in names">{{name}}</li> </ul> </div>--> <!--ng-repeat 指令用在一个对象数组上：--> <!--<div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"> <p>循环对象：</p> <ul> <li ng-repeat="name in names">{{name.name + " " + name.country}}</li> </ul> </div>--> <!--创建自定义的指令--> <!-- 除了 AngularJS 内置的指令外，我们还可以创建自定义指令。 你可以使用 .directive 函数来添加自定义的指令。 要调用自定义指令，HTML 元素上需要添加自定义指令名。 使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive 你可以通过以下方式来调用指令： 元素名 属性 类名 注释 --><!-- 元素名方式|属性方式(默认) replace 参数为 true：只会将标签名字替换掉，其他属性仍然保留 如:<h1 id="not_del sec" class="sec_c">自定义指令!</h1> 如果 restrict 是 "A"，也只是替换掉原来标签的名称，而属性还是会保留 如:<h1 id="sec" class="sec_c" runoob-directive="">自定义指令!</h1> --> <div ng-app="myApp" ng-controller="myCtrl"> <runoob-directive id="not_del"></runoob-directive> <!--<div runoob-directive></div>--> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function ($scope) { $scope.test = "test"; }); app.directive("runoobDirective", function() { return { //restrict: "AE", //Default replace: true,//是否替换掉页面原先定义好的标签，true: 替换|false:不替换，默认为 false template : "<h1 id='sec' class='sec_c'>自定义指令!</h1>", link: function (scope, jqEle, attrs) {//加载完成后调用，还可以再对 template 进行修改 console.log(scope); console.log(jqEle);//[h1#not_del sec.sec_c, context: runoob-directive#not_del] jqEle.css("color", "red"); console.log(attrs);//mc {$attr: Object, $$element: n.fn.init(1), id: "not_del sec", class: "sec_c"} //$(attrs.$$element).css("color", "red"); } }; }); </script> </div> <!-- 定义指令，执行不同的操作 --> <!--<div ng-app="myApp" ng-controller="myCtrl"> <div enter="msgLoading()">数据加载中</div> <div enter="deleteConfirm()">删除数据</div> </div> <script> angular.module("myApp", []).controller("myCtrl", function ($scope) { $scope.msgLoading = function () { alert("数据加载中..."); }; $scope.deleteConfirm = function () { alert("您确认需要删除吗？"); }; }).directive("enter", function () { //默认使用 E, template 为空 return function (scope, jqEle, attrs) { jqEle.mouseenter(function () { scope.$apply(attrs.enter); }); } }); </script>--> <!--类名方式--> <!--<div ng-app="myApp"> <div class="runoob-directive"></div> <script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { restrict: "C", template : "<h1>自定义指令!</h1>" }; }); </script> </div>--> <!--注释方式--> <!--<div ng-app="myApp"> <!– directive: runoob-directive –> <script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { restrict : "M", replace : true, template : "<h1>自定义指令!</h1>" }; }); </script> <p><strong>注意：</strong> 我们需要在该实例添加 <strong>replace</strong> 属性， 否则评论是不可见的。</p> <p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "M" 才能通过注释来调用指令。</p> </div>--> <!-- 限制使用 你可以限制你的指令只能通过特定的方式来调用。 通过添加 restrict 属性,并设置只值为 "A", 来设置指令只能通过属性的方式来调用: restrict 值可以是以下几种: E 作为元素名使用 A 作为属性使用 C 作为类名使用 M 作为注释使用 restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。 --> <!-- <div ng-app="myApp"> <div runoob-directive></div> <script> var app = angular.module("myApp", []); app.directive("runoobDirective", function () { return { restrict: "A", //区分大小写 template: "<h1>自定义指令!</h1>" } }) </script> </div>--> <!--<div ng-app="myApp" ng-controller="myCtrl"> <h3 ng-bind="Now"></h3> <h3 ng-bind="NowTime"></h3> </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function ($scope, $interval) { var now = new Date(); //获取时间，只能在 controller 里面，不能在 ng-init 里面初始化。 $scope.Now = now.getHours() + ":" + now. getMinutes() + ":" + now.getSeconds(); (function () { setInterval(function () { $scope.$apply(function () {//需要手动调用 $apply() 函数，将变化的值映射到页面 now = new Date(); $scope.Now = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds() }) }, 1000); })(); //第二种：angular js 内部的 service: $interval 对应了 JS window.setInterval 函数。 $scope.NowTime = new Date().toLocaleTimeString(); $interval(function () { $scope.NowTime = new Date().toLocaleTimeString(); }, 1000); }); </script>--> <!--<div ng-app="myApp" ng-controller="DirectiveController"> <p>姓名: <input type="text" ng-model="name"/> <br/></p> <!–<first/>–> <!–<second/><!–继承父级作用域 name–>–> <!–<third/><!–无法取得 name–>–> <!–<fourth/><!–使用自己作用域的 name–>–> <fifth/> <script> angular.module('myApp', []).directive('first', [ function(){ return { // scope: false, // 默认值，共享父级作用域 // controller: function($scope, $element, $attrs, $transclude) {}, restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment template: 'first name:{{name}}', }; }]).directive('second', [ function(){ return { scope: true, // 继承父级作用域并创建指令自己的作用域 // controller: function($scope, $element, $attrs, $transclude) {}, restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment //当修改这里的name时，second会在自己的作用域中新建一个name变量，与父级作用域中的 // name相对独立，所以再修改父级中的name对second中的name就不会有影响了 template: 'second name:{{name}}', }; }]).directive('third', [ function(){ return { scope: {}, // 创建指令自己的独立作用域，与父级毫无关系 // controller: function($scope, $element, $attrs, $transclude) {}, restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment template: 'third name:{{name}}', }; }]).directive('fourth', [ function(){ return { scope: {}, // 创建指令自己的独立作用域，与父级毫无关系 controller: function($scope, $element, $attrs, $transclude) { $scope.name = "Four" }, restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment template: 'four name:{{name}}', }; }]).directive('fifth', [ function(){ return { scope: true, // 创建指令自己的独立作用域，与父级毫无关系 controller: function($scope, $element, $attrs, $transclude) { $scope.name = "Five" }, restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment template: 'fifth name:{{name}}', //优先使用自己作用哉的变量 }; }]) .controller('DirectiveController', ['$scope', function($scope){ $scope.name="mike"; }]); </script> </div>--> <!--<div ng-app="myApp"> <food apple banana orange>food</food> <br> <!–<food apple>apple</food> //不能定义多个–> </div> <script> angular.module("myApp", []).directive("food", function () { return { restrict: "E", controller: function ($scope) {//指向下面的 foodCtrl $scope.food = []; this.addApple = function () { $scope.food.push("apple"); }; this.addBanana = function () { $scope.food.push("banana"); }; this.addOrange = function () { $scope.food.push("orange"); }; }, link: function (scope, jqEle, attrs) { jqEle.click(function () { console.log(scope.food); }); } } }).directive("apple", function () { return { require: "food",//这里相当于继承 food 标签，两者相结合才能使用 link: function (scope, jqEle, attrs, foodCtrl) { foodCtrl.addApple(); } } }).directive("orange", function () { return { require: "food", link: function (scope, jqEle, attrs, foodCtrl) { foodCtrl.addOrange(); } } }).directive("banana", function () { return { require: "food", link: function (scope, jqEle, attrs, foodCtrl) { foodCtrl.addBanana(); } } }); </script>--></body></html>指令的选项
阅读全文
0 0
- AngularJs directive指令详解
- AngularJs directive指令实例
- AngularJS directive指令
- angularjs->directive(指令)
- angularjs----directive 指令
- AngularJs:Directive指令用法
- AngularJs:Directive指令用法
- angularjs 指令"directive"举例
- AngularJs:Directive指令用法
- AngularJS 刷新指令(directive)
- AngularJS Directive指令
- AngularJS clone directive 指令复制
- AngularJS之directive指令参数
- angularjs directive 指令 学习笔记
- AngularJS——directive指令
- Angularjs自定义指令（directive）
- AngularJS 的 ngSwitch 指令 (directive) 使用陷阱
- AngularJS实例详解Directive（指令）机制
- mysql主从
- LATeX与jabref联合使用的教程
- LNAMP反向代理等功能实现
- java.lang.IllegalStateException: Failed to load ApplicationContext
- 安装完kali需要解决的问题
- AngularJS Directive指令
- moto xt1085 Rom包半定制制作
- beanstalkd
- MySql数据库插入数据乱码
- hdu5074-递推-Hatsune Miku
- CSDN博客积分规则
- python web框架django入门
- RadioButton
- 关于C语言逻辑运算符的应用
