angular js中的directive
标签：
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=http://www.mamicode.com/"../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
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/41581.html
- 上一篇：asp.net core 从 3.0 到 3.1
- 下一篇：web攻击模式
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")