首页 > 代码库 > angular自定义指令-1
angular自定义指令-1
1、angular指令感觉就相当于写一个组件，扩展html的语法，比如你写了一个图片上产的组件input-image，引用的时候直接用指令引
<input-image ng-model="image_url"></input-image>
用就好
2、如何写angular指令，主要就是调用directive方法api，方法内返回一个包装特定属性对象
3、angular指令开始compile结束link
4、从外部像指令传递数据，有叫绑定策略，传递数据的主要有两种
@绑定和=绑定
区别：
1、@绑定从外部传递到内部，内部改变不会反映到外部，=绑定是双向的，任何一方的改变都会相互影响
2、@绑定是通过angular表达式{{ }}方式传递eg:<my-dir title="{{title}}"></my-dir>,=绑定传递值不需要表达式eg:<my-dir title="title"></my-dir>
下面写个简单的demo说明，
模板sometest.html
<div class="p_text"> <p> <label>title:{{title}}</label><input type="text" ng-model="title"> </p> <p> <label>text:{{text}}</label><input type="text" ng-model="text"> </p> <button ng-click="alertTest()">点击test </button>{{alertTest}}===</div>指令定义：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="http://www.mamicode.com/angular.js"></script> <style type="text/css"> .p_text{ border: solid 1px red; } </style></head> <div ng-controller="testController"> <input type="text" ng-model="title" placeholder="expr..."> title:{{ title }}<br/> <input type="text" ng-model="text" placeholder="text"> text:{{text}}<br/> <input-test title="{{title}}" text="text" ng-click ="alertTest()"></input-test> </div> <script type="text/javascript"> angular.element(document).ready(function () { var myApp = angular.module(‘myApp‘,[],angular.noop); myApp.directive(‘inputTest‘,function () { return { compile: angular.noop, templateUrl:"sometest.html", replace: false, scope: { alertTest:‘&alertFun‘, title:‘@title‘ , //directive里面的title取值为element属性titlearr的动态的值{{title}} --注意外部传递值的方式与 = 的不同{{}} text:‘=text‘//directive里面text的取值为element属性textarr的值text在element中scope中的值，scope.text --注意外部的传递值的方式与@的不同 "" },//这里的=title其实用的是 restrict: ‘AE‘ }; }).controller(‘testController‘,function ($scope,$parse) { $scope.say = "hello worlds!"; $scope.title = "外部title"; $scope.text = "外部text"; $scope.num = 1; $scope.alertTest = function () { ++$scope.num; alert($scope.num); } }); angular.bootstrap(document, [‘myApp‘]); }) </script></body></html>下一篇如何使用link和compile定义指令
angular自定义指令-1
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。