angularjs入門-ng-Change,ng-Blur,ng-Mouseenter,ng-include
這篇要講的其實還是一些angularjs的directive，但是這些是屬於算事件的概念，尤其angularjs內建的事件指令非常多，所以不一一細數，要參考的可以直接去官網查看directive的部份，https://docs.angularjs.org/api/ng/function/angular.isDate，首先我先來說明一下ng-Change，顧名思義就是在變換的時候，會觸發的事件，其實事件的使用都大同小異，我們之前有說過ng-Click，ng-Change主要則是用在比如select或checkbox或radio這方面，如下示例
<div ng-controller="FirstCtrl as ctrl">
男<input type="radio" value="男" ng-model="ctrl.sex" ng-change="ctrl.sexChange()" />
女<input type="radio" value="女" ng-model="ctrl.sex" ng-change="ctrl.sexChange()" />
<hr />
<select ng-model="ctrl.select" ng-change="ctrl.selectChange()">
<option>請選擇</option>
<option>台北市</option>
<option>新北市</option>
</select>
<script src="Scripts/angular.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
var vm = this;
vm.sexChange = function () {
alert('已選擇' + vm.sex);
};
vm.selectChange = function () {
alert("已下拉" + vm.select);
};
});
</script>
</body>
至於ng-Blur，也就是離開控制項的時候會觸發，如下例子
<div ng-controller="FirstCtrl as ctrl">
<input type="text" ng-Blur="ctrl.blur()" />
</div>
<script src="Scripts/angular.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
var vm = this;
vm.blur = function () {
alert('離開text');
}
});
</script>
</body>
ng-mouse有一系列事件，操作方式也都大同小異，這邊也就簡單給一個例子，就不多說明，還是強烈建議去官網看看有哪些可以用，顧名思義主要就是滑鼠一系列的事件
<div ng-controller="FirstCtrl as ctrl">
<input type="text" ng-mouseenter="ctrl.mouseEnter()" />
</div>
<script src="Scripts/angular.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
var vm = this;
vm.mouseEnter = function () {
alert('進入');
}
});
</script>
</body>
ng-include其實有點像partial view的概念，在以下的例子我多增加了兩支html，如temp1.html和temp2.html，如圖下的樣子
完成的樣子如下圖，上面是temp1.html的內容，下圖則是temp2.html的內容
下面是index.html的原始碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body ng-app="App">
<div ng-controller="FirstCtrl">
<div ng-include="'temp1.html'"></div>
<hr />
<div ng-include="'temp2.html'"></div>
</div>
<script src="Scripts/angular.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
$scope.taiwan = ['台北', '桃園', '新竹', '台中', '台南', '高雄'];
});
</script>
</body>
</html>接著是temp1.html的原始碼
<option value="" ng-selected="defaultSelect">請選擇</option>
</select>
{{selectValue}}
最後是temp2.html
其實angularjs的directive非常多，很多用法都大同小異，就不再多做說明，只要知道用法，再去官網看有什麼可以用，很快就能掌握，以上希望對大家有幫助，也請大家多多指教
