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

原创

IT枫斗者 2024-04-30 14:17:07 博主文章分类：编程学习 ©著作权

文章标签 angular.js 前端 javascript html ide 文章分类 HarmonyOS 后端开发

©著作权归作者所有：来自51CTO博客作者IT枫斗者的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

控制器的数据向指令传递

<!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>
</body>
<!-- 控制器的数据向指令传递 -->
</html>

templateUrl

<!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>
</body>
</html>

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参数实例

<!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 your-aa sex="{{datas.sex}}"></div>
</body>
</html>

公共的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);
})