AngularJS内置指令的特点？AngularJS自定义指令是什么？如何创建一个指令？自定义指令：
var myApp = angular.module("myApp", []);
myApp.directive("hello", function(){ //directive自定义一个命令
return{
restrict: "E", //"E"是element的缩写,表示该命令以html元素的方式使用; "A"表示用作属性; "C"表示样式类; "M"表示注释
template: "<div>hello angular</div>", //"Template"表示将指令替换成什么样式的模板(页面).可以是多个比较复杂的模板封装成一个指令
replace: true //<div myDirect></div>当replace为true时, myDirect对应的模板会完全替换<div>DOM元素；若为false,则myDirect对应的模板会插入到<div>内部.
}
});
元素名：
<runoob-directive></runoob-directive> //此时restrict："E"
属性：
<div runoob-directive></div> //此时restrict："A"
类名：
<div class="runoob-directive"></div> //此时restrict："C"
注释：
<!-- directive: runoob-directive --> //此时restrict："M" --> 注释内容前后都必须有一个空格。
// 方式1：推断式（不推荐使用）
myApp.controller("myCtrl", function ($scope, $filter) {
$scope.date = $filter("date")(new Date(), "yyyy-MM-dd HH:mm");
})
// 方式2：显示注入
myApp.controller("myCtrl", controllerFn);
controllerFn.$inject = ["$scope", "$filter"];
function controllerFn($scope, $filter) {
$scope.date = $filter("date")(new Date(), "yyyy-MM-dd HH:mm");
}
//方式3：行内注入
myApp.controller("myCtrl", ["$scope", "$filter", function ($scope, $filter) {
$scope.date = $filter("date")(new Date(), "yyyy-MM-dd HH:mm");
}])
需求：将数组里的每项值加10输出
var arr = [1,2,3,4,5];
var newArr1 = [];
var newArr2 = [];
方式1：声明式（更加注重的是执行的结果，声明式是对命令式的局部包装，像选择题）
var newArr2 = arr.map(function(item, index){
return item+10;
})
console.log(newArr2);
方式2：命令式（更加注重的是执行的过程，像解答题）
for(var i = 0; i < arr.length; i++){
var value = arr[i] + 10;
newArr1.push(value);
}
console.log(newArr1);
<body ng-app="myApp" ng-controller="MyCtrl"> //根作用域的作用范围和子作用域的作用范围相同
<script type="text/javascript">
//创建模块对象（angular是引入angular.min.js后自动创建的对象）
app = angular.module("myApp", []); //第一个是模块名,第二个是依赖的模块列表（Angular外部扩展模块） 与ng-app是相对应的，每个字符串表示一个模块的名字.被依赖的模块必须首先加载执行，模块可以使用被依赖模块里定义的指令和服务. （和依赖注入很像，有点继承的意思）
注：后面的模块列表必须写上，才是定义模块；若不写[]，则是获取模块实例。
app.controller("MyController", //控制器名；控制器的构造函数。代码段：生成子作用域对象
function ($scope){
console.log(this);
console.log($scope);
$scope.firstname="kobe"; //先有属性定义,然后使用ng-model绑定，页面中才能通过表达式用
$scope.lastname="bryant";
$scope.getName = function(){
return $scope.firstname + ‘ ‘ + this.lastname;
}
});
//优化 链式调用（angular.module.controller函数返回值为模块,因此需要创建多个作用域对象时可以采用链式方法,而无需分别调用）
angular.module(‘myApp‘, [])
.controller(‘myCtrl1‘, function($scope){
$scope.empName = ‘kobe‘;
})
.controller(‘myCtrl2‘, function($scope){
$scope.empName = ‘wade‘;
})
</script>
//以上代码有问题，项目上线打包时js代码压缩后形参会用a、b、c等字母代替; 代码压缩的$scope会被abcd代替，angular解析不了.
//解决办法：
angular.module(‘myApp‘, [])
.controller(‘myCtrl1‘, [‘$scope‘, function($scope){ //这样压缩时,数组中的字符串不会被压缩,angular解析压缩函数时用‘$scope‘替换压缩后的abcd.因此此时形参可以任意命名.
$scope.empName = ‘kobe‘; //这种注入方式称为"显式声明依赖注入", 前面的称为"隐式声明依赖注入"
}])
.controller(‘myCtrl2‘, [‘$scope‘, function($scope){
$scope.empName = ‘wade‘;
}])
eg:
var myModule = angular.module("myModule", []);
myModule.directive("hello", function(){
return {
restrict: "C,E,M,A",
template: "<div>hello angular</div>",
replace: true }
});
myModule.controller("myCtrl", ["$scope", function($scope){
// console.log($scope)
$scope.name = "test";
$scope.$watch("name", function(newValue, oldValue){
console.log("old: "+oldValue+" new:"+newValue); })
}])
angular.module("myModule1", [‘myModule‘]); //myModule1依赖myModule, 所以myModule必须先加载
// ng-style：动态引用通过js指定的样式对象{color:‘red‘, background:‘blue‘}
<div style="width: 200px;height:200px;" ng-style="myStyle"></div>
$scope.myStyle = {
background: ‘red‘
}
ng-class：动态引用定义的样式
<!--定义两种style类,html标签可以直接通过class属性调用某个style,eg: class="evenB"-->
<style>
.evenB{
}
.oddB{
}
</style>
<div style="width: 200px;height:200px;" ng-style="myStyle"
ng-mouseenter="enter()" ng-mouseleave="exit()"></div> //鼠标移进移出命令
<ul>
<li ng-class="{evenB:$even, oddB:$odd}" ng-repeat="person in persons">{{person.username}}--{{person.age}}</li> //指定偶数行使用样式evenB，奇数行使用odd样式.(奇偶根据$index)
</ul>
angular.module("myApp", []).
controller(‘MyCtrl‘, ["$scope", function($scope){
//定义剩余字数的方法
$scope.message = "";
$scope.getWords = function(){
// console.log($scope.message);
if($scope.message.length>100){
$scope.message = $scope.message.slice(0, 100);
return 0;
}
else{
return 100-this.message.length;
}}
$scope.delWords = function(){
$scope.message = "";
localStorage.removeItem(‘note_key‘);
}
$scope.saveWords = function(){
alert(‘note is saved‘);
localStorage.setItem(‘note_key‘, JSON.stringify($scope.message)); //一般先将内容转成JSON格式存储（更安全）
$scope.message = "";
}
//google浏览器清理各种缓存的方法:更多工具->清理浏览数据
$scope.readWords = function(){
// if(localStorage.)
console.log(localStorage.getItem(‘note_key‘));
$scope.message = JSON.parse(localStorage.getItem(‘note_key‘) || ‘[]‘); //若不存在该key getItem返回null, 将JSON对象/JSON数组装换成原生JSON对象. 处理null的情况
}
}
]);
原文：https://www.cnblogs.com/luckyboylch/p/12330305.html