directive指令汁汗，link綁定事件（$apply這種方式只需要改變頁面的調(diào)用方法即可）
/**
* Created by GrandKai on 29/09/2016.
*/
var app = angular.module("app", []);
app.controller("foodCtrl", function ($scope) {
$scope.loadMoreData = function () {
alert("加載更過數(shù)據(jù)衷畦。。");
}
$scope.delData = function () {
alert("刪除數(shù)據(jù)碰酝。霎匈。");
}
});
app.directive("enter", function () {
// 只有一個link函數(shù)可以直接返回function
return function (scope, element, attrs) {
element.bind("mouseenter", function () {
// scope.$apply("loadMoreData()");
scope.$apply(attrs.enter);//調(diào)用更叫靈活
});
}
});
app.directive("food", function () {
return {
restrict: "E", // 不寫默認(rèn)是A屬性
template: "hello angular",
replace:true,//默認(rèn)false，作用：取代food標(biāo)簽元素（頁面不顯示）
scope: {},//需要清空scope
controller: function ($scope) {
$scope.foods = [];
this.addApple = function () {
$scope.foods.push("apple");
};
this.addOrange = function () {
$scope.foods.push("orange");
};
this.addBanana = function () {
$scope.foods.push("banana");
}
},
link: function (scope, element, attrs) {
element.bind("mouseenter", function () {
console.log(scope.foods);
});
}
}
});
app.directive("apple", function () {
return {
require: "food",
// foodCtrl 指向food中定義的controller
link: function (scope, element, attrs, foodCtrl) {
foodCtrl.addApple();
}
}
});
app.directive("orange", function () {
return {
require: "food",
// foodCtrl 指向food中定義的controller
link: function (scope, element, attrs, foodCtrl) {
foodCtrl.addOrange();
}
}
});
app.directive("banana", function () {
return {
require: "food",
// foodCtrl 指向food中定義的controller
link: function (scope, element, attrs, foodCtrl) {
foodCtrl.addBanana();
}
}
});
html代碼
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<script src="js/angular.min.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container" ng-controller="foodCtrl">
<food apple banana orange>所有食物</food>
</br>
<food apple banana>所有食物</food>
</br>
<div enter>im here1</div>
</br>
<div enter="loadMoreData()">im here2</div>
</br>
<div enter="delData()">im here3</div>
</div>
<script type="text/javascript" src="food.js"></script>
</body>
</html>
