angularjs自定义指令通用属性详解

喜欢ヅ旅行 2024-03-16 22:28 40阅读 0赞

## angularjs自定义指令通用属性详解 ##

### 自定义指令属性 ###

*  restrict：指令在html中的应用形式（‘A’‘E’‘C’‘M’）,分别指代attribute、element、class、comment,默认值是A
 *  scope：指令的作用范围，scope在指令中通过属性标签传递，每一个指令都有自己的作用域，并且比依赖于父级scope作用域。
    
     *  scope对象有name和type变量属性，用法如下：
     *  name:“@”(值传递，单向绑定)：@符号表示变量是值传递，指令会检索从父级scope中传递而来的字符串的值，指令可以使用该值但是无法修改，属于只读数据；
     *  amount:“=”(引用，双向绑定)：=表示变量是引用传递，指令检索主scope引用的值，值可以是任意类型的，包括复合对象和数组。指令可以更改父级scope中的值；
     *  save:“&”(表达式)：&表示变量是父级scope中的表达式，允许指令实现比修改值更高的操作
 *  template：替代原始模块中标记的字符串，替换功能将替换所有旧元素为新值，template使用scope中定义的变量与replace相关，replace：说明是否替换原始标记中的值或是追加原始标记中的值，默认值是false，这时原始标记将保留；
 *  trasclude：说明自定义指令是否复制原始标记中的内容
 *  link：次属性非常重要很常用，主要负责操作DOM事件及注册事件监听器等；link方法的参数如下：
    
     *  scope：指令scope的引用，scope在初始化时是不被定义的，link方法会注册监听器监视值变化事件；
     *  element：包含指令的DOM元素的引用；一般用jquery方法来操作dom；
     *  controller：在嵌套指令的情况下使用，把子指令的引用提供给父指令，指令之间可以交互
     *  注意，当调用link 方法时， 通过值传递（“@”）的scope 变量将不会被初始化，它们将会在指令的生命周期中另一个时间点进行初始化，如果你需要监听这个事件，可以使用scope.$watch 方法。

### 代码示例： ###

*      /创建指令模块 (或者检索现有模块) 
        var m = angular.module("myApp");
        
        // 创建"my-dir"指令 
        myApp.directive("myDir", function() { 
          return { 
            restrict: "E",        // 指令是一个元素 (并非属性) 
            scope: {              // 设置指令对于的scope 
              name: "@",          // name 值传递 （字符串，单向绑定） 
              amount: "=",        // amount 引用传递（双向绑定） 
              save: "&"           // 保存操作 
            }, 
            template:             // 替换HTML (使用scope中的变量) 
              "<div>" + 
              "  {
             {name}}: <input ng-model='amount' />" + 
              "  <button ng-click='save()'>Save</button>" + 
              "</div>", 
            replace: true,        // 使用模板替换原始标记 
            transclude: false,    // 不复制原始HTML内容 
            controller: [ "$scope", function ($scope) { …  }], 
            link: function (scope, element, attrs, controller) {…} 
          } 
        });

### 几种方式实现的demo ###

#### 控制器的数据向指令传递 ####

#### templateUrl ####

#### transclude参数实例 ####

*      <!DOCTYPE html>
        <html lang="en" ng-app="app">
        <head>
            <meta charset="UTF-8">
            <script src="js/angular.js"></script>
            <script src="js/index.js"></script>
            <title>Document</title>
        </head>
        <body ng-controller="indexCtrl">
            <div my-directive my-url="{
             {datas.url}}" my-name="{
             {datas.name}}"></div>
            <div my-directive1 my-url="{
             {datas.url}}" my-name="{
             {datas.name}}"></div>
            <script type="text/ng-template" id="hello.html">
                <p>名称：{
             {myUrl}}</p>
                <p>路径：{
             {myName}}</p>
            </script>
            <div sidebox title="Links">
                <ul>
                    <li>first link</li>
                    <li>second link</li>
                </ul>
            </div>
            <div sidebox title="TagCloud">
                <div class="tagcloud">
                    <a href="">Graphics</a>
                    <a href="">AngularJS</a>
                    <a href="">D3</a>
                    <a href="">Front-end</a>
                    <a href="">Startup</a>
                </div>
            </div>
        </body>
        </html>

#### controller参数实例 ####

#### 公共的js代码 ####

*      var myapp = angular.module("app",[]);
        myapp.controller("indexCtrl",function($scope){
            $scope.datas = {
                url:'http://www.baidu.com',
                name:'点我去百度',
                sex:'女'
            }
        })
        myapp.directive("myDirective",function(){
            return{
                restrict:'A',
                scope:{
                    'myUrl':'@',
                    'myName':'@'
                },
                replace:true,
                template:'<a href="{
             {myUrl}}">{
             {myName}}</a>',
                link:function(){
        
                }
            }
        })
        myapp.directive("myDirective1",function(){
            return{
                restrict:'AE',
                scope:{
                    'myUrl':'@',
                    'myName':'@'
                },
                replace:false,
                templateUrl:'hello.html',
                link:function(){
                    
                }
            }
        })
        myapp.directive("sidebox",function(){
            return{
                restrict:'AE',
                scope:{
                    title:'@'
                },
                transclude:true,
                template:'<div class="sidebox">\
                    <div class="content">\
                    <h2 class="header">{
             { title }}</h2>\
                    <span class="content" ng-transclude>\
                    </span>\
                    </div>\
                    </div>'
            }
        })
        myapp.directive("yourAa",function(){
            return{
                restrict:'A',
                scope:{
                    sex:'@'
                },
                controller:'someController'
            }
        })
        myapp.controller("someController",function($scope,$element,$attrs,$transclude){
            alert($scope.sex);
        })