//宣告ng-app var demoApp = angular.module("demoapp", []); //ng-app底下掛載ng-controller demoApp.controller("demoCtrl", function($scope) { }); //ng-app底下掛載directive demoApp.directive("address", function() { return { template: "<div>" + "輸入地址:<input type='text' size='6' maxlength='5' ng-model='address_zip' /> " + "<input type='text maxlength='40' ng-model='address_content' />" + "</div>", restrict: 'C', replace: true, require: ['ngModel'], scope: { ngModel: '=' }, link: function(scope, elem, attrs) { //設定ngModel的方法 scope.setValue = function() { if (scope.address_zip != undefined && scope.address_content != undefined) scope.ngModel = scope.address_zip + scope.address_content; else scope.ngModel = ''; } //監控郵遞區號改變 scope.$watch('address_zip', function() { scope.setValue(); }) //監控地址欄位改變 scope.$watch('address_content', function() { scope.setValue(); }) } } });
<div ng-app="demoapp"> <div ng-controller="demoCtrl"> <h1>AngularJs客制化「台灣地址」輸入方法Demo</h1> <h3>輸出地址:{{myaddress}}</h3> <input type='text' class='address' ng-model='myaddress' /> </div> </div>