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="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定义指令
时间： 2024-10-12 11:31:42