码迷,mamicode.com
首页 > Web开发 > 详细

angular js中的directive

时间:2019-12-05 01:14:55      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:src   数据   自定义   继承   text   ESS   实现   tle   复习   

angular js中的自定义指令

自定义指令return如下指令定义对象:

  • restrict:restrict约束自定义指令的使用形式,取值有A(属性),E(元素),C(类),M(注释)
  • template:该属性指定angular js指令被替换为html模板
  • scope:scope:true 表示创建一个作用域,该作用域继承于父作用域(即ng-controller控制的作用域),
    scope:{} 创建一个完全孤立的作用域,不会继承父作用域的任何数据
    scope:{"@"} 创建一个单向绑定的作用域,改变父作用域的数据会改变子作用域的数据,改变子作用域的数据不会改变父作用域的数据
    scope:{"="} 创建一个双向绑定的子作用域
    scope:{"&"} 创建一个与父作用域方法进行绑定的子作用域
  • controller:该属性用于指令之间的通信,在一个指令中定义方法和属性,以供其他的指令进行调用
<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title>复习directive</title>
        <script type="text/javascript" src="../js/angular.js"></script>
    </head>
    <body ng-controller="myController">
        <h4>父作用域:{{message}}</h4>
        <input type="text" ng-model="message" />
        <h4>子作用域:</h4>
        <h4>scope={}时,子作用域和父作用域完全隔离</h4>
        <div my-directive></div>
        <h4>scope={"="}的时候,实现子作用域与父作用域的双向数据绑定</h4>
        <div my-directive1 message="message"></div>
        <h4>scope={"@"}时,实现子作用域和父作用域的单向数据绑定,
            <br/>父作用域值的改变会影响子作用域,子作用域不会影响父作用域</h4>
        <div my-directive2 message={{message}}></div>
        <script>
            var app = angular.module("myApp", []);
            app.controller("myController", function($scope){
                $scope.message = "father info"
            });
            app.directive("myDirective", function(){
                return {
                    restrict: "A",
                    scope: {
                    },
                    template: "<div ng-init=\"message='child info'\">child message:{{message}}<br /><input type='text' ng-model='message'/></div>"
                };
            });
            app.directive("myDirective1", function(){
                return {
                    restrict: "A",
                    template: "<div>child message:{{message}}<br /><input type='text' ng-model='message'/></div>",
                    scope: {
                        message: "="
                    }
                }
            });
            app.directive("myDirective2", function(){
                return{
                    retrict: "A",
                    template: "<div>child message:{{message}}<br/><input type='text' ng-model='message'/></div>",
                    scope: {
                        message: "@"
                    }
                }
            });
        </script>
    </body>
</html>

angular js中的directive

标签:src   数据   自定义   继承   text   ESS   实现   tle   复习   

原文地址:https://www.cnblogs.com/techi/p/11986502.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!