Angularjs 指令

首先看一个例子：
var myModule = angular.module("myModule",[]);
myModule.directive("hello",function(){
  return{
    restrict : "E",
    template:"<div>Hi 111</div>",
    replace:true
  }
});

<hello></hello>
<div hello></div>

restrict ： “???？”  一共分4种。
restrict : "A"     //  attribute  属性
restrict : "E"     //   element  元素
restrict : "M"     //   comment  注释
restrict : "C"     //   class  样式

举个例子：
<!doctype html>
<html lang="en" ng-app="MyModule">
<meta charset="UTF-8">
<title>App First</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<style>
</style>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
  <loader loadData()>滑动加载</loader>
</div>
</body>
</html>

var myModule = angular.module("MyModule",[]);
myModule.controller("MyCtrl",["$scope",function($scope){
  $scope.loadData = function(){
    console.log("加载数据中...");
  }
}]);

myModule.directive("loader",function(){
  return{
    restrict:"A,E",
    link:function(scope,element,attr){
      element.bind("mouseenter",function(){
        scope.$apply("loadData()")   //      这两个都是同样的效果
　　　　 scope.loadData();               //　　　　
      })
    }
  }
});

posted @ 2014-11-20 09:13  加油小猪2015  阅读(101)  评论(0)    收藏  举报