Angular之指令
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Angular之指令相关的知识，希望对你有一定的参考价值。
指令之--自定义HTML元素和属性
angularjs支持我们拓展自定义的html元素。比如，我们想自定义一个自己的元素：<my-dom></my-dom>如下：
var app=angular.module("myApp",[]); app.controller(‘mycontroler‘,function($scope){ }); app.directive("myDom",function(){ return { restrict:‘E‘, template:‘<a href="www.baidu.com"> click to baidu</a>‘ } })
<!doctype html> <html> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller=‘mycontroler‘> <my-dom>click</my-dom> </div> </div> <script type="text/javascript" src="controller.js"></script> </body> </html>
注意：AngularJS在通过directive注册指令时，命名规则需要根据“驼峰命名”规则，首字母小写，第二个单词以大写字母开始，并且对应HTML节点,如myDom对应my-dom
属性介绍：
restrict:可选值包括：E(元素)A(属性)C（类）M（注释），可通过组合的方式同时设定。如通过A（属性）： <div my-dom></div> 就会被替换，由于浏览器的多样性，建议使用 A(属性)的方式。
E:<my-dom></my-dom> A:<div my-dom></div> C:<div class=‘my-dom‘></div> M:<!--directive:my-dom-->
replace:true/false来配置是否将绘制的内容替换为template内容。
指令---数据传递
当我们不局限于固定的template时，而是灵活配置我们的指令，此时，需要在模板中使用scope变量，这样将发挥个人的使用，如下：
<!doctype html> <html> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller=‘mycontroler‘> <my-dom >click</my-dom> <div my-Att>classs</div> <h1 ng-init="great=‘hello‘"> the great is {{great}} </h1> <div my-auto mylink="www.bing.com" my-Text=‘ go to www.bing.com‘></div> </div> <script type="text/javascript" src="controller.js"></script> </body> </html>
var app=angular.module("myApp",[]); app.controller(‘mycontroler‘,function($scope){ $scope.scopelink=‘www.cnblogs.com‘ }); app.directive("myDom",function(){ return { restrict:‘E‘, template:‘<a href="www.baidu.com"> click to baidu</a>‘ } }); app.directive("myAtt",function(){ return { restrict:‘EA‘, replace:true, template:‘<a href="www.baidu.com"> click to baidu</a>‘ } }); app.directive("myAuto",function(){ return{ restrict:‘A‘, replace:true, scope:{ myLink:"@mylink",//特定 绑定数据源 对应 mylink属性 myText:"@"//默认 绑定数据源 对应 my-text属性 }, template:‘<a href="{{myLink}}">‘+‘{{myText}}</a>‘ } })
注意：这里我们是在myAuto中自定义了内部区域scope访问级。如果我们在controller层级定义当前$scope.myLink时，在template中访问不到。不过我们可以通过这样的方式来进行传递
<input type="text" ng-model="link"> <div my-auto mylink="{{link}}" my-Text=‘ go to www.bing.com‘></div>
或者
app.controller(‘mycontroler‘,function($scope){ $scope.link=‘www.cnblogs.com‘ });
这两种方式都可以将$scope.link与template之间进行一次传递。
一个双向绑定的实例（后面详细介绍）:
<label>Their URL field:</label> <input type="text" ng-model="theirUrl"> <div my-directive some-attr="theirUrl" my-link-text="Click me to go to Google"></div>
app.directive(‘myDirective‘, function() { return { restrict: ‘A‘, replace: true, scope: { myUrl: ‘=someAttr‘, // 经过了修改 myLinkText: ‘@‘ }, template: ‘<div><label>My Url Field:</label><input type="text" ng-model="myUrl" /><a href="{{myUrl}}">{{myLinkText}}</a></div>‘ }; });
以上是关于Angular之指令的主要内容，如果未能解决你的问题，请参考以下文章