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之指令的主要内容,如果未能解决你的问题,请参考以下文章

angularjs2 学习笔记 组件

详说Angular之指令(directive)

angular之指令

angularjs2 学习笔记 组件

vue之指令篇 ps简单的对比angular

json 可视代码工作室Angular with Firebase片段