AngularJs_DirectiveController_Demo

AngularJs directive controller Demo.

by Ryan Hsu

HTML

<div ng-app="demoapp">
  <div ng-controller="demoCtrl">
    <h1>AngularJs客制化「台灣地址」輸入方法Demo（有controller）</h1>
    <h3>輸出地址：{{myaddress}}</h3>
    <input type='text' class='address' ng-model='myaddress' />
  </div>
</div>

JavaScript

//宣告ng-app
var demoApp = angular.module("demoapp", []);

//ng-app底下掛載ng-controller
demoApp.controller("demoCtrl", function($scope) {

});

//ng-app底下掛載directive controller
//這樣的寫法就可以把directive的controller抽出來寫，讓需要的directive共享這個controller
demoApp.controller("directiveCtrl", function($scope) {
  $scope.init = function() {
    $scope.address_zip = '11423';
    $scope.address_content = '台北市內湖區XX路XX里XX鄰XX-X號';
  }
  $scope.init();
});

//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' size='40' ng-model='address_content' />" +
      "</div>",
    restrict: 'C',
    replace: true,
    require: ['ngModel'],
    scope: {
      ngModel: '='
    },
    controller: 'directiveCtrl', //指定controller
    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();
      })
    }
  }
});